ng2: Wie erstellt man eine Variable in ngFor Schleife

Question

Ich versuche herauszufinden, wie man eine Variable in einer ngfor-Schleife erstellen.

Ich habe eine Schleife wie folgt aus:

<td *ngFor="#prod of products"> 
    <a href="{{getBuild(branch,prod)?.url}}"> 
    {{getBuild(branch,prod)?.status}} 
    </a> 
</td> 

Sie können das die „getBuild“ Anruf sehen hat mehrere Male wiederholt werden. (viele Male in meinem aktuellen Beispiel). Ich möchte eine Möglichkeit, diese Variable in der Vorlage innerhalb der Schleife zu erstellen und einfach wiederverwenden. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

denke ich, lokale Variablen (definiert mit dem # Zeichen) nicht für Ihren Anwendungsfall gelten.

Wenn Sie eine lokale Variable in einem HTML-Element definieren, entspricht dies tatsächlich der Komponente, falls vorhanden. Wenn für das Element keine Komponente vorhanden ist, verweist die Variable auf das Element selbst.

Wenn Sie einen Wert für eine lokale Variable angeben, können Sie eine bestimmte Anweisung auswählen, die dem aktuellen Element zugeordnet ist. Zum Beispiel:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/> 

werden die Instanz der ngForm Richtlinie mit dem Strom in dem name Variablen zugeordnet gesetzt.

So zielen lokale Variablen nicht auf was Sie wollen, d. H. Einen Wert für das aktuelle Element einer Schleife erstellt.

Wenn Sie versuchen, so etwas zu tun:

<div *ngFor="#elt of eltList" > 
    <span #localVariable="elt.title"></span> 
    {{localVariable}} 
</div> 

Sie werden diese folgenden Fehler haben:

Error: Template parse errors: 
There is no directive with "exportAs" set to "elt.title" (" 
    <div *ngFor="#elt of eltList" > 
    <span [ERROR ->]#localVariable="elt.title"></span> 
    {{localVariable}} 
    </div> 
"): AppComponent@2:10 

Angular2 sieht tatsächlich für eine Richtlinie der angegebenen Namen passenden elt.title hier) ... Siehe diese Plunkr, um den Fehler zu reproduzieren: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

Siehe diesen Link: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, Abschnitt "Lokale Variablen" f oder mehr Details.

Neben dem aktuellen Element der Iteration stellt ngFor nur einen Satz von exportierten Werte, die auf lokale Variablen aliased werden können: index, last, even und odd.

Siehe diesen Link: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Was Sie tun, ist könnte eine Unterkomponente zu schaffen Elemente in der Schleife anzuzeigen. Es akzeptiert das aktuelle Element als Parameter und erstellt Ihre "lokale Variable" als Attribut der Komponente. Sie können dieses Attribut dann in der Vorlage der Komponente verwenden, sodass es einmal pro Element in der Schleife erstellt wird. Hier ist ein Beispiel:

@Component({ 
    selector: 'elt', 
    template: ` 
    <div>{{attr}}</div> 
    ` 
}) 
export class ElementComponent { 
    @Input() element; 

    constructor() { 
    // Your old "localVariable" 
    this.attr = createAttribute(element.title); 
    } 

    createAttribute(_title:string) { 
    // Do some processing 
    return somethingFromTitle; 
    } 
} 

und die Art und Weise, es zu benutzen:

<div *ngFor="#elt of eltList" > 
    <elt [element]="elt></elt> 
</div> 

Answer 2

Nein, speichern Sie einfach das Ergebnis in getBuild für jede/Kombination oder so lange wie es mit den gleichen Werten wie zuvor aufgerufen wird.

Answer 3

Ich denke, das ist ein klassischer Fall für die Herstellung einer Unterkomponente.

<td *ngFor="#prod of products"> 
    <subComp [prod]=prod></subComp> 
</td> 

Ihre Komponente würde dann einen prod Eingang und läuft weiter, sobald die gewünschte Funktion in OnInit.

Einfaches Beispiel zupfen here