检查 object 属性是否存在于对象数组中

Question

如果我有以下对象数组：

abc: [ { id: 1, name: 'fred', lastName: 'curt' }, { id: 2, name: 'bill' }, { id: 2, username: 'ted', lastName: 'zapata' } ]

有没有办法使用*ngFor来遍历 HTML 页面上的数组来检查特定的lastName属性是否已经存在？

例如：

<div *ngFor="let a of abc">
  <p>{{a.name}}</p>
  <p>//if a.lastName property is not present, show some message</p>
</div>

Answer 1

您可以使用*ngIf和 a == null / != null比较来检查这一点。 为了避免将两个*ngIf与反向语句一起使用，您还可以使用else关键字使我们使用ng-template 。

<div *ngFor="let a of abc">
  <p>{{a.name}}</p>

  <!-- display last name if it's defined, otherwise use the #noLastName template -->
  <p *ngIf="lastName != null; else noLastName">{{ a.lastName }}</p>

  <!-- template used when no last name is defined -->
  <ng-template #noLastName><p>a.lastName property is not present</p></ng-template>
</div>

Answer 2

我认为您正在寻找*ngIf指令。

代码将如下所示：

<p *ngIf="a.lastName; else noLastName"> 
   /* If true it'll show everything between the p element*/
</p>
<ng-template #noLastName>
   /*If there's no last name, everything in the ng-template noLastName will be shown but it's not necessary to have an else case.*/
</ng-template>

Answer 3

你也可以这样做：

<div *ngFor="let a of abc">
  <p>{{a.name}}</p>
  <p>{{a.lastName || 'Different message'}}</p>
</div>