时间戳

首页 > 解决方案 > Angular *ngFor 数据匹配

json - Angular *ngFor 数据匹配

问题描述

我需要帮助才能找到在 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>

标签： jsonangular

解决方案

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

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

推荐阅读