Angular中基于搜索值动态控制Bootstrap列显隐的技术问题

嘿，我完全懂你的困扰！你想实现的是搜索时让不匹配的列直接消失，而不是只隐藏内容留空容器对吧？确实，Angular不允许同一个元素上同时使用*ngFor和*ngIf——这俩都是结构型指令，会抢着修改DOM结构，原方案用ng-container虽然能隐藏内容，但空的col-4盒子还在，导致布局出现空隙，体验很差。

给你两种靠谱的解决方案：

方案一：组件内过滤数据（推荐） #

把过滤逻辑放在组件里，用计算属性返回过滤后的数组，模板里直接遍历这个结果。这样不匹配的元素根本不会被渲染成列，从根源解决布局问题，而且逻辑更集中，性能也更好。

修改组件代码： #

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

  // 计算属性，每次searchVal变化自动过滤
  get filteredValues() {
    const lowerSearchTerm = this.searchVal.toLowerCase();
    // 用includes替代indexOf，代码更直观
    return this.values.filter(val => val.toLowerCase().includes(lowerSearchTerm));
  }
}

修改模板代码： #

<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 filteredValues" class="col-4 my-2">
      {{val}}
    </div>
  </div>
</div>

方案二：调整模板结构（无需修改组件） #

如果不想动组件代码，也可以把*ngFor移到ng-container上，然后在列元素上单独用*ngIf。这样只有符合条件的列才会被创建，空容器不会存在。

修改后的模板代码： #

<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 class="col-4 my-2" *ngIf="val.toLowerCase().includes(searchVal.toLowerCase())">
        {{val}}
      </div>
    </ng-container>
  </div>
</div>

两种方法都能实现你要的效果：输入搜索词后，不匹配的列会直接被移除，布局不会有空隙。方案一更适合复杂场景，逻辑清晰；方案二适合快速修改简单场景。

内容的提问来源于stack exchange，提问作者EddyG