Angular 数组长度为0时如何隐藏div

我有一个对象表（Bills=>Bill=>Products=>Product）。每个表都包含另一个使用管道进行过滤的表。管道过滤工作正常，但在过滤数组后，它们的名称（

bill.name

）仍然可见，即使它们没有显示任何过滤结果。我怎样才能解决这个问题

<span class="search-span">
    <input [(ngModel)]="searchText" placeholder="Start typing a product name..." class="search-input">
</span>
</div>
<hr>
<ng-container *ngFor="let bill of bills; let i = index">
    <div class="col-xs-12" *ngIf="bill.products?.length > 0">
        <h5>
            {{bill.name}} {{i === 0 ? '(this bill group)' : ''}}
        </h5>
    </div>          
    <div class="col-xs-3" *ngFor="let product of bill.products | filter : searchText">
        <div [class.selected]="isProductSelected(product)" (click)="selectProduct(product)">
            <span class="text">{{product.name}}</span>
        </div>
    </div>
</ng-container>

---

将筛选产品的声明移动到

{{bill.name}{{i==0？'（此票据组）'':'}
{{product.name}
没有发现任何产品

---

您可以嵌套多个

，并且可以使用

*ngIf=“XXX as YYY”

语法应用一个条件并将结果存储在一个新的模板变量中。

您可以为其创建stackblitz吗？当我使用创建ngIf时，如何添加信息“未找到任何产品”！过滤？数组为空时总是显示长度，我只需要一个信息。你能帮我吗？@aKa对不起。我不明白。您希望何时显示“未找到任何产品”消息？当只有一个产品时？当筛选返回0个元素时，我想显示支持信息“找不到产品”。@aka OK。我更新了答案。您可以使用

*ngIf=“filtered.length else noProducts”

语法呈现模板。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any, searchText: string): any {
    if (!items) return [];

    if (!searchText) return items;

    searchText = searchText.toLowerCase();

    return items.filter(it => {
      return it.name.toLowerCase().includes(searchText);
    });
  }
}