Question

我叉了一个有角的堆叠闪电并修改了网格。如何将字体更改为每个网格区域具有不同的字体？这是stackblitz

这是组件。

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

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
}

/   **
 * @title Dynamic grid-list
 */
@Component({
  selector: 'grid-list-dynamic-example',
  templateUrl: 'grid-list-dynamic-example.html',
  styleUrls: ['grid-list-dynamic-example.css'],
})
export class GridListDynamicExample {
  tiles: Tile[] = [
    {text: '', cols: 5, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 3, rows: 1, color: 'lightgreen'},
    {text: 'Three', cols: 2, rows: 2, color: 'lightpink'},
    {text: 'Four', cols: 3, rows: 1, color: '#DDBDF1'},
    {text: 'Five', cols: 3, rows: 1, color: '#DDBDF1'},
      {text: 'Six', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

这是html文件：

<mat-grid-list cols="5" rowHeight="20vh" [gutterSize]="'0px'">
   <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

Answer 1

您可以在[ngStyle]="{'font-family': tile.font}"标记内使用mat-grid-tile。

然后您可以添加属性font并删除Tile[]：

  tiles = [
    {text: '', cols: 5, rows: 1, color: 'lightblue',size:'15', font: 'verdana'},
    {text: 'Two', cols: 3, rows: 1, color: 'lightgreen',size:'20', font: 'serif'},
    {text: 'Three', cols: 2, rows: 2, color: 'lightpink',size:'25', font: 'cortana'},
    {text: 'Four', cols: 3, rows: 1, color: '#DDBDF1',size:'30', font: 'arial'},
    {text: 'Five', cols: 3, rows: 1, color: '#DDBDF1',size:'35', font: 'comic'},
    {text: 'Six', cols: 2, rows: 1, color: '#DDBDF1',size:'40', font: 'courier'},
  ];
}

Answer 2

您可以使用索引来动态更改字体大小（但我认为这不会帮助您），因此提供了两种解决方案：

解决方案1：

<mat-grid-list cols="5" rowHeight="20vh" [gutterSize]="'0px'">
  <mat-grid-tile
      *ngFor="let tile of tiles; let i = index"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color"
      [ngStyle]="{'font-size': i * 10 + 'px'}">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

解决方案2：

您可以在数据本身中添加另一个参数，例如size：

<mat-grid-list cols="5" rowHeight="20vh" [gutterSize]="'0px'">
  <mat-grid-tile
      *ngFor="let tile of tiles; let i = index"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color"
      [ngStyle]="{'font-size': tile.size + 'px'}">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

TS代码：

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

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
  size: 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', size: '15' },
    { text: 'Two', cols: 3, rows: 1, color: 'lightgreen', size: '20' },
    { text: 'Three', cols: 2, rows: 2, color: 'lightpink', size: '25' },
    { text: 'Four', cols: 3, rows: 1, color: '#DDBDF1', size: '30' },
    { text: 'Five', cols: 3, rows: 1, color: '#DDBDF1', size: '35' },
    { text: 'Six', cols: 2, rows: 1, color: '#DDBDF1', size: '40' },
  ];
}

StackBlitz

如何更改网格区域中的字体

2 个答案: