javascript - 动态过滤字符串列表

Question

如何动态过滤字符串列表？

我找到了使用 ng-repeat 的示例，但它不适用于 Angular 7:它不加载任何字符串，仅适用于 ngFor

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">Find ticket</div>
  </div>
  <input class="form-control" placeholder="Insert ticket to find" [(ngModel)]="find_text">
</div>
<ul class="list-group" style="max-height: 200px; overflow: auto;">
  <li class="list-group-item" *ngFor="let s of find_text">{{s.Value}}</li>  
</ul>

Answer 1

您将 find_text 绑定(bind)为 ngModel 中的字符串以及 *ngFor 指令中的对象列表。我想这就是你要问的:

public text;
private word_list = [{value:"Apple"}, {value:"Banana"}, {value:"Pear"}, {value:"Bluebarry"}]
get find_text(){
  return this.word_list.filter(x => x.value.toLowerCase().includes(text.toLowerCase()));
}

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">Find ticket</div>
  </div>
  <input class="form-control" placeholder="Insert ticket to find" [(ngModel)]="text">
</div>
<ul class="list-group" style="max-height: 200px; overflow: auto;">
  <li class="list-group-item" *ngFor="let s of find_text">{{s.value}}</li>  
</ul>