javascript - 使用 Angular 2 中的 observable 搜索数组中的元素

Question

我有书名的搜索输入，我需要它来查找书籍而无需重新加载页面。我的代码现在可以在重新加载页面时运行，我输入书名并推送提交。

如何重写此代码以使用 observable，从而在不重新加载页面的情况下搜索书籍？

filterByName(){
    this.filteredItems = [];

    if(this.inputName != ""){
      this.books.forEach(element => {
        if(element.author.toUpperCase().indexOf(this.inputName.toUpperCase())>=0 ||
            element.title.toUpperCase().indexOf(this.inputName.toUpperCase())>=0){
          this.filteredItems.push(element);
        }
      });
    }else{
      this.filteredItems = this.books;
    }
    console.log(this.filteredItems);
    this.init();
  }

HTML:

<div class="form-group">
    <label>Filter </label>
    <input  type="text"  id="inputName" [(ngModel)]="inputName"/>
    <input type="button" (click)="filterByName()" value="Apply"/>
  </div>

Answer 1

您不需要为此使用可观察量，如果您更新组件中的 filteredItems 变量，它将在您的 View 中更新，例如:

filterByName() {
  if(this.inputName.length < 1) {
    return;
  }
  this.filteredItems = this.books.filter(book => {
    return book.author.toUpperCase().indexOf(this.inputName.toUpperCase()) >= 0 ||
      book.title.toUpperCase().indexOf(this.inputName.toUpperCase()) >= 0
  });
}

在您看来:

<div class="form-group">
  <label>Filter </label>
  <input  type="text"  id="inputName" [(ngModel)]="inputName"/>
  <input type="button" (click)="filterByName()" value="Apply"/>
</div>

<ul>
  <li *ngFor="let book in filteredBooks">{{ book.title }} - {{ book.author }}</li>
</ul>