标签: angular-material

我正在使用Angular 4 Material,特别是Autocomplete组件.

我的选项列表filteredHomeTeams是Observable <Team []>类型,我正在构建下拉列表,并使用名为teamName的对象的属性进行选择

这是HTML:

<mat-form-field class="example-full-width">
            <input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutocomplete]="homeAuto">
            <mat-autocomplete #homeAuto="matAutocomplete" (optionSelected)="setHomeTeam()">
                    <mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" >
                        {{ team.teamName }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

正如您所看到的,我有一个名为optionSelected的事件,它调用方法setHomeTeam()

我的团队课程是:

export class Team {
    teamName: string;
    teamSelfRef: string;
}

我需要做什么,这对于经验丰富的角度程序员来说可能是非常基础的:

我在下拉列表中选择了team.teamName,输入字段中有team.teamName.如何将team.teamSelfRef从与参数相同的对象传递给"setHomeTeam()"？

我需要根据名称构建和选择对象,但我需要触发具有不同属性的逻辑.

如果我可以将整个对象作为参数传递给方法"setHomeTeam()",它也会工作

我正在使用Anuglar材质（5.0.4），并且我希望mat-fab-button默认的背景颜色是白色，就像Angular示例中一样。但是对我来说，由于某种原因，背景色是强调色。

的HTML

<h2>Fab Buttons</h2>
<div>
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h2>Mini Fab Buttons</h2>
<div>
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

主题

$deeporange-teal-amber-theme-primary: mat-palette($mat-deep-orange, 500, 100, 700);
$deeporange-teal-amber-theme-accent: mat-palette($mat-teal);
$deeporange-teal-amber-theme-warn: …

我正在使用angular5 mat-selection-list在同一组件中创建多个组件。

list-selection-example.html

 Shoes: 
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes" 
                   [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectShoes()">Deselect all Shoes</button>

Cloths: 
<mat-selection-list #cloths>
  <mat-list-option *ngFor="let cloth of typesOfCloths" 
                   [value]="cloth">
    {{cloth}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectCloth()">Deselect all Cloths</button>

列表选择示例

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  typesOfCloths = ['Amaxa', 'Cotton', 'Woolen', 'Nylon'];

    @ViewChild(MatSelectionList) shoes: MatSelectionList;
    @ViewChild(MatSelectionList) cloths: MatSelectionList;


  deselectShoes(){
    this.shoes.deselectAll(); 
  }

  deselectCloth(){
    this.cloths.deselectAll(); 
  }
  ngOnInit(){

  }
}

这是完整的代码：https : //stackblitz.com/edit/angular-i3pfu2-dla3rd?file=app%2Flist-selection-example.ts

在此示例中，deselectShoes()方法按预期工作。但deselectCloth()在 …

我有四个角度为4的垫子表.表A,表B,表C和表D.表C有三列.Column1,Column2,Column3.如果我想更改表C中第3列条目的字体颜色,我该怎么做？在此之前我没有任何使用角度的经验,所以请原谅我,如果我的问题太琐碎或不清楚.

材料组件中的动画不起作用.我试图把组件sidenav和菜单,平滑的动画不起作用.我认为BrowserAnimationsModule存在问题,因为当我从package.json中删除它时没有任何反应,尽管当你安装材料时它是必需的

.................................................. .................................................. .................................................. ..........................

的package.json

   {
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "6.1.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.5",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.5",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6", …

我将垫子桌子与角形材料的垫子分类头结合使用。但奇怪的是，排序在6列中的2列（0和4）上工作正常。在对其他条目进行排序时，总是将一个条目拉到顶部，其余条目保持未排序或随机“排序”状态。我希望我可以提供足够的代码来解决它。导入都在那里，这基本上是从https://v5.material.angular.io/components/table/examples复制粘贴的。

桌子

每隔一列看起来像摘要中的一列

 <mat-table #matTable [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="Status">
   <mat-header-cell *matHeaderCellDef mat-sort-header
....

打字稿

@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
   this.dataSource.sort = this.sort;
}
ngOnInit() {
   this.dataSource = new MatTableDataSource(this.projectlist); 
}
//no specific code for sorting needed (I think)

抱歉，截图是德语的，但您应该明白我的意思。

已排序

任何想法如何解决这个问题？

我在项目中使用Angular 6.0.6和Angular Material 6.3.0。我已将对话框组件添加到entryComponents应用程序模块中。如果直接在仪表板组件中打开该对话框，效果很好，但是在大多数情况下，当我在rightclickGoogle Maps标记的事件处理程序中打开该对话框时，该对话框为空。

在这种情况下，它为空：

private attachEvents(wo) {
  wo.marker.addListener('rightclick', (e) => {
    this.dialog.open(DialogAlert, {
      width: '400px',
      data: {
        confirmation: true,
        message: 'test',
        title: 'X'
      }
    });
  });
}

如果我将open代码放在外面wo.marker.addListener，效果很好。

乐于听到任何建议以使其在事件处理程序中正常运行。我尝试在事件处理程序中调用detectChanges（ChangeDetectorRef），但无济于事。

对话框的HTML代码：

<h1 mat-dialog-title>{{data.title ? data.title : defaultTitle}}</h1>
<div mat-dialog-content>
  <p>{{ data.message }}</p>
</div>
<div mat-dialog-actions>
  <button *ngIf="confirmation" mat-raised-button (click)="onNoClick()">Cancel</button>

  <button *ngIf="confirmation && !options" mat-raised-button (click)="onConfirmClick()" cdkFocusInitial>Yes</button>
  <button color="primary" *ngFor="let o of options;  index as i" mat-raised-button (click)="onConfirmClick(i)">{{o}}</button> …

我使用Angular 6和Angular Material 6.我想要mat-chip字段.当我输入mat-chip字段时,将启用保存按钮,否则将被禁用.输入字段是必需的,但不能要求mat-chip字段.请帮我找到解决方案.谢谢.

我的示例代码链接在这里:stackblitz demo

是否可以更改预制角度材质主题的字体,例如deeppurple-amber.css？

我只找到创建自定义主题的示例,您必须自己定义几乎所有内容.我真的只对设置自己的字体感兴趣.

如何使用角度材质组件创建html电子邮件正文.

由于组件标签未呈现.例如,简单的角形材料卡如下.有没有办法这样做？

<mat-card>
  <mat-card-header>
        ...
  </mat-card-header>
  <mat-card-content>
        ...
  </mat-card-content>     
</mat-card>