Question

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

这是一个简单的模板：

CXX = g++
CXXFLAGS = -c -Wall -Wextra -Werror
LDFLAGS =  -lgmp -lsodium -lssl -lcrypto -lgmpxx
SRC = $(wildcard *.cpp )
HDR = $(wildcard *.h )
OBJ = $(SRC) $(SRC :.cpp =.o )
all : Release
Debug : CXXFLAGS +=-g
Debug : test
Release : test
test : $(OBJ)
    $(CXX) -o $@ $^ $(LDFLAGS)
%.o : %.cpp $(HDR)
    $(CXX) $(CXXFLAGS) $< -o $@
clean :
    rm -f $(OBJ) test

以及组件：

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

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

但是我们都知道不可能在同一个元素上同时使用两者。

在我在此处提供的代码中，我使用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>

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

Answer 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

引导列上的ngFor和ngIf

3 个答案: