时间戳

首页 > 解决方案 > 使用 *ngFor 创建类

angular - 使用 *ngFor 创建类

问题描述

使用角度网格我想为网格的每个部分创建一个类以在 css 文件中使用。这是html文件：

<mat-grid-list cols="5" rowHeight="20vh" [gutterSize]="'0px'">
  <mat-grid-tile
  *ngFor="let tile of tiles; let i of [1,2,3,4,5]"
  [colspan]="tile.cols"
  [rowspan]="tile.rows"
  [style.background]="tile.color"
  [ngStyle]="{'font-size': 'calc(' + tile.fontSize + 'px + 0.5vw)', 
  'font-family': tile.fontFamily +', sans-serif;'}"
  class="tile + 'i'"
   >
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

这是组件文件：

import { Component } from '@angular/core';

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
  fontSize: string;
  fontFamily: string;
}
@Component({
  selector: 'grid-list-dynamic-example',
  templateUrl: 'grid-list-dynamic-example.html',
  styleUrls: ['grid-list-dynamic-example.css'],
})
export class GridListDynamicExample {
  tiles: Tile[] = [

    { text: 'One', cols: 5, rows: 1, color: 'lightblue', fontSize: '20', 
fontFamily: 'Rubik'},
    { text: 'Two', cols: 3, rows: 1, color: 'lightgreen', fontSize: '20', 
fontFamily: 'Roboto Condensed'},
    { text: 'Three', cols: 2, rows: 2, color: 'lightpink', fontSize: 
'25', fontFamily:  'Rubik'  },
    { text: 'Four', cols: 3, rows: 1, color: '#DDBDF1', fontSize: '30' , 
fontFamily: 'Roboto Condensed' },
    { text: 'Five', cols: 3, rows: 1, color: '#DDBDF1', fontSize: '35', 
fontFamily:  'Roboto Condensed'},
    { text: 'Six', cols: 2, rows: 1, color: '#DDBDF1', fontSize: 
'40',fontFamily: 'Rubik' },
  ];

我认为这条线不准确：class="tile + 'i'"

这是堆栈闪电战

标签： angular

解决方案

要使用索引设置类名ngFor，请使用ngClass：

<mat-grid-tile
  *ngFor="let tile of tiles; let i = index"
  [ngClass]="'tile' + i"
  ...
>

请参阅此 stackblitz以获取演示。

推荐阅读