Question

我从一个称为tile的数组中填充了3个tile。数组具有称为格式的列/属性，该列/属性描述了应如何格式化该数组中的特定数字：

tiles: Tile[] = [
    {
      rate: 0.585,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Customer Rate",
      format: "percent"
    },
    {
      rate: 0.75,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Sales Rate",
      format: "percent"
    },
    {
      rate: 54349.54,
      cols: 1,
      rows: 1,
      color: "#fff",
      name: "Sales"
      format: "currency"
    }
  ];

我正在尝试使用ng-if以特定方式格式化数字：

<mat-grid-list cols="3" rowHeight="85px">
    <mat-grid-tile class="metric-tile" *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
      [style.background]="tile.color">
      <div style="font-size: 12px">{{tile.name}}</div>
      <div ng-if="tile.format == 'percent'" style="font-size: 60px">{{tile.rate | percent }}</div>
      <div ng-if="tile.format == 'currency'" style="font-size: 60px">{{tile.rate | currency }}</div>
      <div style="font-size: 24px">{{tile.label}}</div>
    </mat-grid-tile>
  </mat-grid-list>

但是在每个磁贴中，我都会获得两次汇率值，一次是设置为百分比格式，一次是使用货币格式。我在做什么错了？

Answer 1

正确的语法是*ngIf="tile.format == 'percent'"。您正在使用AngularJS指令，而不是Angular 6。

Answer 2

问题：您混合了AngularJs和Angular 2+。您必须使用ng-if
来代替*ngIf

<mat-grid-list cols="3" rowHeight="85px">
    <mat-grid-tile class="metric-tile" *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
      [style.background]="tile.color">
      <div style="font-size: 12px">{{tile.name}}</div>
      <div *ngIf="tile.format == 'percent'" style="font-size: 60px">{{tile.rate | percent }}</div>
      <div *ngIf="tile.format == 'currency'" style="font-size: 60px">{{tile.rate | currency }}</div>
      <div style="font-size: 24px">{{tile.label}}</div>
    </mat-grid-tile>
  </mat-grid-list>

为什么此ng-if语句无法正确评估？

2 个答案: