Javascript Angular显示ngIf在ngfor内失败时未找到任何数据

我有一个数组，将它显示为一个列表，并应用一些条件对其进行筛选。我想在条件失败时显示未找到的数据

.ts

.html

{{item.name}

输入Minage和Gender是动态值

---

上面的代码非常适合搜索过滤器。但是我无法显示未找到的数据。如何在数组中的搜索条件失败时显示未找到的数据？

与其在HTML中执行复杂的操作，我建议在模型中执行这些操作。过滤模型中的项目，并绑定到HTML中的结果

然后，只要

ngochanges（）

中的

@Input（）

属性发生更改，或者只要

名称

输入发生更改，您就需要筛选项目

@Input（）Minage；
@投入（）性别；
名称=“”；
项目=[
{姓名：'name01'，年龄：14岁，性别：'男'}，
{姓名：'name02'，年龄：25岁，性别：'female'}，
{姓名：'name03'，年龄：24岁，性别：'男'}，
{姓名：'name04'，年龄：16岁，性别：'female'}，
{姓名：'name05'，年龄：24岁，性别：'男'}，
];
结果=this.items.slice（）；
ngOnChanges（）：void{
this.filterietems（）；
}
onNameChange（）：void{
this.filterietems（）；
}
filterItems（）：void{
this.results=this.items.filter（item=>{
return item.name.toLowerCase（）.indexOf（this.name.toLowerCase（））！=-1
&&item.age>this.Minage&&item.gender==this.gender；
});
}

然后您的HTML变得简单：

  @Input() Minage;
  @Input() Gender;
   name = '';

 items = [
          {name:'name01' , age : 14, gender : 'male'},
          {name:'name02' , age : 25, gender : 'female'},
          {name:'name03' , age : 24, gender : 'male'},
          {name:'name04' , age : 16, gender : 'female'},
          {name:'name05' , age : 24, gender : 'male'},
      ]

     <p>
     <input type="text" [(ngModel)]="name" (ngModelChange)="name"/>
    </p>

    <p *ngFor="let item of items">
       <ng-container  *ngIf='item.name.toLowerCase().indexOf(name.toLowerCase()) !== -1 && 
             item.age > Minage && item.gender === Gender'>

               {{item.name}}

       </ng-container>

    </p>