如何在 md-grid-tile 中绑定 class？

Question

我有一个模型：

 tiles = [
    {text: 'One', cols: 1, rows: 1 , class: 'red-hours'}];

并且我尝试使用 class

显示块

<md-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.cols"
    [rowspan]="tile.rows"
    [style.background]="tile.color">
    [class]="tile.class"
    {{tile.text}}
  </md-grid-tile>

还有如何在每个字段中插入自定义内容？

Answer 1

您可以为此使用属性绑定。在我的示例中，我只设置了 class。您可以修改它以同时设置其他属性

app.component.html:

<div   *ngFor="let tile of tiles" >
   <span  [attr.class] = "tile.class"> {{tile.text}}</span>
</div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
   styles: ['.red {color: red};']
})


export class AppComponent {

  tiles = [
    {text: 'One', class: 'red'}];
}

Answer 2

考虑使用 NgClass 而不是属性绑定。这个 plunker 显示了几个不同的选项：

https://plnkr.co/edit/ePQGMYdKi2bStpMuqoUr?p=preview

<md-grid-list cols="2" rowHeight="2:1">
  <md-grid-tile>1</md-grid-tile>
  <md-grid-tile [class.red-tile]="true">2</md-grid-tile>
  <md-grid-tile ngClass="red-tile">3</md-grid-tile>
  <md-grid-tile [ngClass]="'red-tile'">4</md-grid-tile>
</md-grid-list>

如何在 md-grid-tile 中绑定 class？

How to bind class in md-grid-tile?

angular-material2

angular