У меня есть модель как:
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>
Также как вставить пользовательский контент в каждое поле?
Для этого можно использовать привязку атрибутов. В моем примере я устанавливаю только класс. Вы можете изменить это, чтобы также установить другие свойства
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'}];
}
Вместо привязки атрибутов рассмотрите возможность использования NgClass. Этот плункер показывает несколько различных вариантов, которые у вас есть:
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>
