javascript - bootstrap 列上的 ngFor 和 ngIf

Question

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

这是一个简单的模板:

<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>