bootstrap 列上的 ngFor 和 ngIf

Question

我想根据搜索值隐藏和显示行内的引导列。

这是一个简单的模板：

<div class="container py-5">
  <p class="text-center"><input type="text" placeholder="search" [(ngModel)]="searchVal"></p>
  <div class="row">
    <div *ngFor="let val of values" class="col-4 my-2">
      <ng-container *ngIf="val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1">
        {{val}}
      </ng-container>
    </div>
  </div>
</div>

和组件：

export class AppComponent  {
  searchVal : string = "";
  values = ['Manager', 'Model', 'Teacher', 'Student'];
}

理想的解决方案是在列上使用 ngFor 和 ngIf：

<div class="row">
    <div *ngFor="let val of values" class="col-4 my-2" *ngIf="val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1">
        {{val}}
    </div>
  </div>

但我们都知道，不可能在同一元素上同时使用两者。

在我在这里提供的代码中，我使用 ng-container 来解决这个问题，但是，由于 ng-container 不在列内，如果值不匹配，则该列保持显示，其内容被隐藏，这看起来很难看。尝试在搜索字段中输入字母“t”，看看我的意思。我正在寻找的解决方案是如果其值不匹配则删除整个列。

这是运行代码： https: //angular-rgc8f7.stackblitz.io

Answer 1

交换你的div和ng-container：

ng-container有循环for并且div有条件if

<div class="container py-5">
  <p class="text-center"><input type="text" placeholder="search" [(ngModel)]="searchVal"></p>
  <div class="row">    
      <ng-container *ngFor="let val of values">
        <div *ngIf="val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1" class="col-4 my-2">
        {{val}}
        </div>
      </ng-container>    
  </div>
</div>