使用带有 *ngif 的 Mat-icons 和 Mat-content - angular 12

Question

在一个角度模板中，我正在尝试创建一个表格，并在特定列中，根据数据，我想显示一个垫子图标或简单地写“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"}
]

我正在尝试在表格中显示它。我的角度模板如下 -

我的 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 类。

      <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>