我正在使用网格布局,我希望文本响应视口。 我正在使用这篇文章和风格:
font-size: calc(16px + 0.5vw);
我如何使用我的 ts 和 html 文件实现这一点? 这是 ts 文件:
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' },
];
}
这是 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"
[ngStyle]="{'font-size': calc(tile.fontSize + 'px' + 0.5vw);,
'font-family': tile.fontFamily +', sans-serif;'}"
>
{{tile.text}}
</mat-grid-tile>
</mat-grid-list>
我在这一行收到一个错误:[ngStyle]="{'font-size': calc(tile.fontSize + 'px' + 0.5vw(;,
这是堆叠闪电战
您的表达式无效。它应该是
[ngStyle]="{'font-size': 'calc(' + tile.fontSize + 'px + 0.5vw)', 'font-family': tile.fontFamily +', sans-serif'}"
演示