Angular *ngFor 数据匹配

Question

我需要帮助才能找到在 Angular 7 模板中显示我的 JSON 数据的正确方法。正如您在下面的 JSON 示例中所见，我有一个具有多个标识号的人员对象，我使用 *ngFor 在模板中显示它们，并使用 *ngIf 来匹配类型并显示编号。但是，此方法只会显示有数据的字段，如果 JSON 对象没有返回学生 ID，则不会显示包括标签在内的整个字段。

我的第一个问题是，我使用 *ngIf 来匹配 ngFor 中的 id 类型是否正确？

其次，如果id类型不可用，例如studentID类型不返回，是否可以使用模板显示N/A？

*更新了重复的护照错误

JSON 数据样本

person = {
  name: { firstname: "John ", lastname: "Smith" },
  identification: [
  { type: "ID", number: "CSG112345", },
  { type: "PASSPORT", number: "AB4455566" }   
  ]}

模板

<ng-container *ngFor="let id of person.identification">
  <p *ngIf="id.type==='ID'">
    <label>ID:</label>
    <b>{{id.number}}</b>
  </p>
  <p *ngIf="id.type==='PASSPORT'"  >
    <label>Passport Number :</label>
    <b>{{id.number}}</b>
  </p>
  <p *ngIf="id.type==='STUDENTID'">
    <label>Student Number :</label>
    <b>{{id.number}}</b>
  </p>
</ng-container>

Answer 1

<b>{{id.number ? id.number : 'N/A'}}</b>

只需使用这一行而不是 <b>{{id.number}}</b> 您将获得预期的输出。

Answer 2

*ngIfs 没有错。只是 ngSwitch 更干净。 您可以在模板中使用三元运算符来设置默认值。

   <ng-container *ngFor="let id of person.identification">
    <ng-container [ngSwitch]="id.type">
      <p *ngSwitchCase="'PASSPORT'">
        <label>Passport :</label>
        <b>{{id.number ? id.number : 'N/A'}}</b>
      </p>
      <p *ngSwitchCase="'PASSPORT'">
        <label>Passport Number :</label>
        <b>{{id.number ? id.number : 'N/A'}}</b>
      </p>
      <p *ngSwitchCase="'STUDENTID'">
        <label>Student Number :</label>
        <b>{{id.number ? id.number : 'N/A'}}</b>
      </p>
    </ng-container>
   </ng-container>

您还拥有 PASSPORT 副本。不知道是不是故意的。由于我们将数组迭代到模板中，因此您应该在显示之前为不存在的成员提供默认值。那将是我的方法。否则你需要做一个fn like

checkForType(type:string):boolean{
 return person.identification.map(e => e.type).includes(type)
};

并在模板中检查它。类似的东西

<ng-container *ngIf="checkForType(id.type)">
.....
</ng-container>
<ng-container *ngIf="!checkForType(id.type)">
.....
</ng-container>

但这会造成 html 文件的大量膨胀。我建议您在将其呈现为 html 之前给它一个默认值。

Answer 3

如果要显示每个模板元素，只需在 <b> 本身中添加条件。请参阅更新的 stackblitz。 https://stackblitz.com/edit/angular-tqixcb

<p>
   <label>Name :</label>
   <b>{{person.name.firstname}}</b>
</p>
<p>
   <label>ID :</label>
   <b>{{getNumber("ID")}}</b>
</p>
<p>
   <label>Passport Number :</label>
   <b>{{getNumber("PASSPORT")}}</b>
</p>

ts 方法：

  getNumber(type): String {
    const numberValue = this.person.identification.find(x => x.type === type);
    if(!numberValue) {
      return "N/A"
    }
    return numberValue.number;
  }