我想根据搜索值隐藏和显示行内的 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
最佳答案
交换您的 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>
关于javascript - bootstrap 列上的 ngFor 和 ngIf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57557904/