如何在 Angular 中使用 ngFor 仅显示某些数据类型？

Question

I'm iterating over the array called "fruits", containing objects of type "FruitService" - a class I defined and want to display each element, but after deleting them (I realize this is weird-no db) they become of type "undefined" contaminating my array. I don't want these to display (they show up as blank) so I want to display only "FruitService" objects. How do I do that?

<ul>

<li *ngFor="let fruit of fruits">
{{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }}

</ul>

Answer 1

You can either filter them with a pipe or by checking if they are truthy:

<ul>
  <ng-container *ngFor="let fruit of fruits">
    <li *ngIf="!!fruit">
      {{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }} 
    </li>
  <ng-container>
</ul>

Solution with a pipe:

<ul>
  <ng-container>
    <li *ngFor="let fruit of fruits | defined">
      {{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }} 
    </li>
  <ng-container>
</ul>

@Pipe({
  name: 'defined'
})
export class DefinedPipe implements PipeTransform {
  transform(array: any[]): any[] {
    return array.filter(element => !!element);
  }
}

Answer 2

This issue is better handled off in the controller. Ideally, there should be no undefined elements in the array when the corresponding element is removed. They should actually be removed from the array.

That said, you could do a simple check in the template to see if the element is defined before rendering them

<ul>
  <ng-container *ngFor="let fruit of fruits">
    <li *ngIf="fruit">
      {{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }}
    </li>
  </ng-container>
</ul>

The ng-container tag would be commented out in the final DOM and won't generate additional elements.