Question

我需要帮助以找到在Angular 7模板中显示JSON数据的正确方法。正如您在下面的JSON示例中所看到的，我有一个带有多个标识号的person对象，我正在使用* ngFor在模板中显示它们，并使用* ngIf来匹配类型并显示数字。但是，此方法仅显示有数据可用的字段，如果未从JSON对象返回学生ID，则不会显示包括标签的整个字段。

首先，我是否通过使用* ngIf匹配ngFor中的id类型来做正确的事情？

第二，还有另一种方式来表示标识数据，如果id类型不可用，例如 studentID类型未返回，我可以使用模板来显示N / A吗？ / p>

*更新了重复的护照错误

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

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

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 2

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

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

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

角度* ng用于数据匹配

3 个答案: