引导列上的 ngFor 和 ngIf答案

【问题标题】：ngFor and ngIf on bootstrap columns引导列上的 ngFor 和 ngIf
【发布时间】：2019-12-24 17:48:38
【问题描述】：

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

这是一个简单的模板：

<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

【问题讨论】：

当我输入 t 时，我看到了学生和老师，但由于引导列 css，左侧还有其他人的空间。

标签： javascript angular twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

试试下面的代码。

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

【讨论】：

【解决方案3】：

难道你不能在你的组件中添加一个函数来在迭代之前动态过滤values。例如

<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 filterValues(values, searchVal)" class="col-4 my-2">
      {{val}}
    </div>
  </div>
</div>

在你的组件中；

filterValues(values: string[], searchVal: string) {
     return values.filter((val: string) => {
       return val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1;
     });
  }

对您的搜索值的更改检测将导致重新过滤，过滤当前搜索值和值列表，并更新您的表格。

这样，您根本不需要ng-container，而且，如果您还需要根据其他条件进行过滤，您可以在一个地方完成所有操作 :)

StackBlitz 示例：https://stackblitz.com/edit/angular-miow53

【讨论】：