在 *ngif 中使用 Mat-icons 和 Mat-content - angular 12

Question

在 angular 模板中，我试图创建一个 table 并在特定列中，根据数据，我想显示一个垫子图标或只是写“N/A”

我有 3 个选项 -

如果不适用则显示“N/A”
如果考试有效，显示<mat-icon>
如果考试无效则显示<mat-icon>有效

我刚才在我的代码中引入了“N/A”位。早些时候，我只有两个 <mat-icon> 选项，我的代码工作正常。

现在，当我尝试打开 HTML 时，它从未显示考试 D 和考试 E 的 <mat-icon>。该列为空白。对于其他 3 个考试，它只显示“N/A”。

任何人都可以帮助我，让我知道我遗漏了什么或做错了什么。

我有 JSON 看起来像这样的数据。

[
{"valid":"Not Applicable","validityDate":"","name":"Exam A"},
{"valid":"Not Applicable","validityDate":"","name":"Exam B"},
{"valid":"Not Applicable","validityDate":"","name":"Exam C"},
{"valid":"Yes","validityDate":"23-01-2022","name":"Exam D"}, 
{"valid":"No","validityDate":"23-01-2017","name":"Exam E"}
]

我正在尝试在 table 中显示它。我的 angular 模板如下 -

我的 component.ts，我在其中读取 JSON 响应并将其添加到对象中，有类似这样的内容 -

    const EXAM_DATA: Array<TrainingElement> = [
  { title: this.userExamJson[0].name, status: this.userExamJson[0].valid, date: this.userExamJson[0].validityDate },
  { title: this.userExamJson[1].name, status: this.userExamJson[1].valid, date: this.userExamJson[1].validityDate },
  { title: this.userExamJson[2].name, status: this.userExamJson[2].valid, date: this.userExamJson[2].validityDate },
  { title: this.userExamJson[3].name, status: this.userExamJson[3].valid, date: this.userExamJson[3].validityDate },
  { title: this.userExamJson[4].name, status: this.userExamJson[4].valid, date: this.userExamJson[4].validityDate },
];

this.dataSource = EXAM_DATA;

我的 HTML 模板如下所示 -

   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

      <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Exam Title </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element">
          <mat-icon *ngIf="element.status == 'Yes'" [ngStyle]="{'color':'green'}" matTooltipPosition="right"
            matTooltipClass="mattooltip" matTooltip={{element.date}}>done_outline</mat-icon>
          <mat-icon *ngIf="element.status == 'No'" [ngStyle]="{'color':'orange'}" matTooltipPosition="right"
            matTooltipClass="mattooltip" matTooltip={{element.date}}>report_problem</mat-icon>
          <mat-content *ngIf="element.status == 'Not Applicable'">N/A</mat-content>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="showColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: showColumns;"></tr>
    </table>

Answer 1

试试这个，

正确检查您的 mattooltip css class。

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element">
   
          <span *ngIf="element.status === 'Not Applicable'; else showStatusIcons">N/A</span>

          <ng-template #showStatusIcons>
            <div matTooltipPosition="right" matTooltipClass="mattooltip" matTooltip={{element.date}}>
              <mat-icon [ngStyle]="{'color': element.status === 'Yes' ? 'green' : 'orange'}">{{ element.status === 'Yes' ? 'done_outline' : 'report_problem' }}</mat-icon>
            </div>
          </ng-template>
        </td>
      </ng-container>

在 *ngif 中使用 Mat-icons 和 Mat-content - angular 12

Using Mat-icons and Mat-content with *ngif - angular 12

angular-template

angular-material

angular

angular9

mat-icon