* ngPer la variabile locale per ogni elemento

Question

Ho una funzione che devo chiamare per ogni elemento che produrrà 2 nuove uscite. Per esempio

list = [{a : 1, b: 2}, {a:3, b: 4}] 

mio html sarebbe

<div *ngFor="#item of list">{{item.c}}, {{item.d}}</div> 

Se notate, io sono la visualizzazione c e d. Quelli non esistono nell'elenco originale, ma voglio chiamare una funzione e calcolarli in modo da poterli visualizzare. Non voglio chiamare la funzione due volte. Il valore di d = a + b + c. Ciò significa che dipende da c

Ho bisogno del mio modello di essere come questo

<div *ngFor="#item of list; #newItem=calculate(item)">{{newItem.c}}, {{newItem.d}}</div> 

So che non posso usare le variabili locali per questo, ma si può pensare ad un'altra soluzione?

esempio dal vivo:

(a) è un prezzo dell'articolo (b) è spese di spedizione (c) è una tassa di vendita calcolato sulla base (a) (d) è prezzo finale = a + b + c

voglio visualizzare:

Price: {{a}} 
Taxes: {{c}} 
Shipping {{b}} 
Final Price: {{d}} 

Answer 1

Preparare i dati prima di utilizzarlo in *ngFor

list.forEach((item) => { 
    item.newItem = calculate(item); 
}) 

<div *ngFor="let item of list">{{item.newItem.c}}, {{item.newItem.d}}</div> 

Answer 2

Una possibilità sarebbe quella di creare un componente dedicato sub per visualizzare la voce:

@Component({ 
    selector: 'item', 
    template: ` 
    {{item.c}}, {{item.d}} 
    ` 
}) 
export class ItemComponent { 
    @Input() 
    set item(item) { 
    this._item = this.calculate(item); 
    } 

    calculate(item) { 
    return ... 
    } 

    get item() { 
    return this._item; 
    } 
} 

e il suo uso:

@Component({ 
    (...) 
    template: ` 
    <div *ngFor="#item of list"> 
     <item [item]="item"></item> 
    </div> 
    `, 
    directives: [ ItemComponent' 
]) 
(...)