javascript - 《Unraveling Angular 2》一书，第 1 章，示例 5

Question

该页面显示潜水列表，它有一个“添加新潜水”、“清除潜水”和一个搜索框，它会在您输入时过滤显示的列表。

这是模板:

<div class="container-fluid">

  <h1>My Latest Dives (Angular/TypeScript)</h1>
  <div class="row">
    <div class="col-sm-5">
      <button class="btn btn-primary btn-lg"
        [disabled]="!enableAdd()"
        (click)="addDive()">
          Add new dive
      </button>
      <button class="btn btn-danger btn-lg"
        (click)="clearDives()">
          Clear dives
      </button>
    </div>
    <div class="col-sm-4 col-sm-offset-3">
      <input #searchBox class="form-control input-lg"
        placeholder="Search"
        (keyup)="0" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4"
      *ngFor="let dive of dives | contentFilter:searchBox.value">
      <h3>{{dive.site}}</h3>
      <h4>{{dive.location}}</h4>
      <h2>{{dive.depth}} feet | {{dive.time}} min</h2>
    </div>
  </div>
</div>

这是组件代码:

import {Component} from '@angular/core';

@Component({
  selector: 'divelog',
  templateUrl: 'app/dive-log.template.html'
})

export class DiveLogComponent {
  public dives = [];
  private _index = 0;
  private _stockDives = [
  {
    site: 'Abu Gotta Ramada',
    location: 'Hurghada, Egypt',
    depth: 72,
    time: 54
  },
  {
    site: 'Ponte Mahoon',
    location: 'Maehbourg, Mauritius',
    depth: 54,
    time: 38
  },
  {
    site: 'Molnar Cave',
    location: 'Budapest, Hungary',
    depth: 98,
    time: 62
  }];

  public enableAdd() {
    return this._index < this._stockDives.length;
  }

  public addDive() {
    if (this.enableAdd()) {
      this.dives.push(this._stockDives[this._index++]);
    }
  }

  public clearDives() {
    this.dives = [];
    this._index = 0;
  } 
}

这是过滤代码:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'contentFilter'})
export class ContentFilterPipe implements PipeTransform {

  transform(value: any[], searchFor: string) : any[] {
    if (!searchFor) return value;

    searchFor = searchFor.toLowerCase();
    return value.filter(dive => 
      dive.site.toLowerCase().indexOf(searchFor) >= 0 ||
      dive.location.toLowerCase().indexOf(searchFor) >= 0 ||
      dive.depth.toString().indexOf(searchFor) >= 0 ||
      dive.time.toString().indexOf(searchFor) >= 0);
  }
}

每当我在搜索框中输入内容时，过滤器就会被调用并且列表会重新呈现，但当我单击“添加”按钮时则不会。如果我在搜索框中有内容，即使搜索框的内容允许显示新项目，“添加”按钮也不会导致潜水列表发生变化。如何更改代码以便单击“添加”按钮会导致重新呈现显示的潜水列表？

Answer 1

你有一个纯管道所以

its method transform will be executed only when it detects a pure change to the input value.

针对您的情况

*ngFor="let dive of dives | contentFilter:searchBox.value"

输入值将是dives和searchBox.value

According to the angular2 guide on pipes:

A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

• 添加 dive 时，数组引用 (dives) 不会更改，因此不会执行 transform 方法。
• 当在过滤器输入中输入内容时，searchBox.value 会发生变化 - 因此会执行 transform。

所以一个可能的解决方案是每次添加一个 div 时总是有一个新的引用数组:

只需替换:

this.dives.push(this._stockDives[this._index++]);

与:

this.dives = this.dives.concat(this._stockDives[this._index++]);

或:

this.dives = [...this.dives, this._stockDives[this._index++]];

第二种方法是使用 impure pipe :

@Pipe({name: 'contentFilter', pure: false })