Angular *ngIf 显示一个没有内容的 div答案

【问题标题】：Angular *ngIf displays a div without contentAngular *ngIf 显示一个没有内容的 div
【发布时间】：2021-04-09 14:36:15
【问题描述】：

我有一个包含对象的数组，每个对象都有一个类型。我只想显示通过按一些按钮更改的特定类型的对象。由于某些原因，对于“食物”类型，它还渲染了其他两个对象，但没有任何内容。

这是数组和类型

  objects = [
    {
      title: 'Spartan Sandwich',
      price: 4,
      type: 'Food',
    },
    {
      title: 'Math Lessons',
      price: 10,
      type: 'Necesities',
    },
    {
      title: 'Ice Skating',
      price: 10,
      type: 'Misc',
    },
  ];
  type: string = 'Food';

这是 HTML

<div class="objects">
  <div class="object-container" *ngFor="let object of objects">
    <app-object [object]="object" *ngIf="object.type === type"></app-object>
  </div>
</div>

我知道它总是渲染所有对象容器 div 是正常的，但是我该如何解决它以使它们不出现？

【问题讨论】：

标签： javascript html arrays angular angular-ng-if

【解决方案1】：

最好的方法是将app-object 组件放在像ng-container 这样的虚拟容器中，这样就不需要使用额外的div。

代码将如下所示： `

<div class="objects">
  <div class="object-container" *ngFor="let object of objects">
    <ng-container *ngIf="object.type === type">
       <app-object [object]="object"></app-object>
    </ng-container>
  </div>
</div>

【讨论】：

【解决方案2】：

要么使用 Shuvo 建议的代码，要么使用过滤器操作“对象”数组。

viewData = this.objects.filter(({ type }) => type === this.type);

【讨论】：

【解决方案3】：

您可以在ng-content 中运行ngFor 循环并检查object-container div 中的object.type：

<div class="objects">
  <ng-content *ngFor="let object of objects">
    <div class="object-container" *ngIf="object.type === type">
      <app-object [object]="object"></app-object>
    </div>
  </ng-content>
</div>

注意： ng-content 不会渲染任何 HTML 元素。

【讨论】：