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

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

这是数组和类型

  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是正常的，但是我如何修复它，使它们不会出现？

您可以在

ng content

中运行

ngFor

循环，并检查

对象。在
对象容器
div中键入
：

<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
元素。
您可以在
ng content
中运行
ngFor
循环，并检查
对象。在
对象容器中键入
div:

<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
元素。
要么使用Shuvo建议的代码，要么使用过滤器操纵“objects”数组

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

要么使用Shuvo建议的代码，要么使用过滤器操纵“objects”数组

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

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

代码如下所示：
`



`最好的方法是将
app对象
组件放在一个虚拟容器中，比如
ng容器
，这样就不需要使用额外的div

代码如下所示：
`



`