design-patterns - Angular2中的装饰/计算数组

我有一个组件，我想这样使用

<comp [list]="['alpha', 'bravo', 'charlie']"></comp>

也就是说，我希望它显示列表的内容。
组件的代码是

@Component({
    selector: 'comp',
    template: `
      <ul>
        <li *ngFor="item of decoratedList()">
          {{ item.name }} - {{ item.foo }} - {{ item.bar }}
        </li>
      </ul>`
})
class Comp {
    list: any[];

    decoratedList(): any[] {
        return this.list.map(item => ({
          name: item,
          foo: fooIt(item),
          bar: barIt(item)
       }));
    }
}

这段代码的问题是decoratedList，因为它每次检查都返回一个新列表，因为它使用了map，这会导致decoratedList() has Changed类型错误。
什么是有角度的意识形态方式来处理这样的模式？

最佳答案

有两种方法：
将decoratedList()的结果赋给属性并将视图绑定到该属性

@Component({
    selector: 'comp',
    template: `
      <ul>
        <li *ngFor="item of decoratedList">
          {{ item.name }} - {{ item.foo }} - {{ item.bar }}
        </li>
      </ul>`
})
class Comp {
    @Input() list: any[];

    updateDecoratedList(): any[] {
        this.decoratedList = this.list.map(item => ({
          name: item,
          foo: fooIt(item),
          bar: barIt(item)
       }));
    }

    // only called when a different list was passed, not when the content of the array changed
    ngOnChanges() {
      this.updateDecoratedList();
    }
}

或者使用IterableDiffers和ngDoCheck也检查list的内容是否有变化。

@Component({
    selector: 'comp',
    template: `
      <ul>
        <li *ngFor="item of decoratedList">
          {{ item.name }} - {{ item.foo }} - {{ item.bar }}
        </li>
      </ul>`
})
class Comp {
    @Input() list: any[];
    differ: any;

    constructor(differs: IterableDiffers) {
        this.differ = differs.find([]).create(null);
    }

    updateDecoratedList(): any[] {
        this.decoratedList = this.list.map(item => ({
          name: item,
          foo: fooIt(item),
          bar: barIt(item)
       }));
    }

    ngDoCheck() {
      var changes = this.differ.diff(this.list);
      if (changes) {
        this.updateDecoratedList();
      }
    }
}

使decoratedList()在属性中缓存结果，并且仅当某个依赖值（list）已更改时才返回新值。对于此策略，还可以使用IterableDiffer检查list的内容是否发生更改。