Angular2中的装饰/计算数组

Question

I have a component, which i want to use like this

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

ie, i want it to display the contents of a list.

The compontent's code is

@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)
       }));
    }
} 

The Problem with this code is decoratedList , because it returns a new list every check, due to it's use of map , which leads to decoratedList() has Changed -type errors.

What is an ideomatic way in angular to handle such a pattern?

Answer 1

There are two ways:

• Assign the result of decoratedList() to a property and bind the view to that property

@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();
    }
} 

or use IterableDiffers and ngDoCheck to also check for changes in the content of 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();
      }
    }
} 

• make decoratedList() cache the result in a property and only return a new one if some dependent value ( list ) has changed. For this strategy also IterableDiffer can be used to check for changes in the content of list .