Dekoriert/Berechnete Felder in Angular2

Question

ich eine Komponente haben, die ich wie dieses

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

d.h verwenden wollen, möchte ich es den Inhalt einer Liste angezeigt werden soll.

Die compontent Code ist

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

Das Problem mit diesem Code ist decoratedList, weil es jeder Überprüfung eine neue Liste zurück, weil es den Einsatz von map ist, die decoratedList() has Changed -Typ Fehler führt.

Was ist ein ideometrischer Weg, um ein solches Muster zu handhaben?

Answer 1

Es gibt zwei Möglichkeiten:

• das Ergebnis decoratedList() auf eine Eigenschaft zuweisen und binden den Blick auf diese Eigenschaft

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

oder IterableDiffers verwenden und ngDoCheck auch Überprüfen Sie auf Änderungen im Inhalt von 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(); 
     } 
    } 
} 

• machen decoratedList() Cache das Ergebnis in einer Eigenschaft und nur einen neuen zurück, wenn einiger abhängiger Wert (list) geändert hat. Für diese Strategie kann auch IterableDiffer verwendet werden, um auf Änderungen im Inhalt von list zu prüfen.