Javascript 引导列上的ngFor和ngIf

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

以下是一个简单的模板：

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

理想的解决方案是在色谱柱上使用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容器来解决这个问题，但是，由于ng容器不在列中，因此如果值不匹配，列将保持显示，其内容将隐藏，看起来很难看。试着在搜索栏中写下字母t，看看我的意思。我正在寻找的解决方案是，如果整列的值不匹配，则删除整列

---

下面是一个运行代码：

请尝试以下代码

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

---

您不能在组件中添加一个函数，以便在迭代之前动态筛选值吗。e、 g

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

对搜索值的更改检测将导致重新筛选，对当前搜索值和值列表进行筛选，并更新表

这样，您根本不需要ng容器，而且，如果您还需要基于其他条件进行筛选，您可以在一个地方完成所有操作：

StackBlitz示例：

交换div和ng容器：

ng容器具有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>

---

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

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

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