Question

我有一个模型：

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

我试图用类

显示块

<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

您可以使用属性绑定。在我的例子中，我只设置了类。您可以修改它以设置其他属性

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中绑定类？

2 个答案: