Angular 4 ng-Behälter vs * ngIf sonst

Question

ich mit vielen cols einen großen Tisch und Schaltflächen des Bearbeitungsmodus zu ändern, zum Beispiel:

<td>{{item.name}}</td> 
<td>{{item.price}}</td> 
<td>{{item.bonusPrice}}</td> 
<td>{{item.kcal}}</td> 
<td>{{item.weight}}</td> 
<td>{{item.type}}</td> 
<td>{{item.status}}</td> 
... 

Welche Variante besser sein wird, erstellen 2 ng-container s

<ng-container *ngIf="!item.isEdited"> 
    <td>{{item.name}}</td> 
    <td>{{item.price}}</td> 
    <td>{{item.bonusPrice}}</td> 
    <td>{{item.kcal}}</td> 
    <td>{{item.weight}}</td> 
    <td>{{item.type}}</td> 
    <td>{{item.status}}</td> 
</ng-container> 

and 

<ng-container *ngIf="item.isEdited"> 
    <td><input [(ngModel)]="item.name"></td> 
    <td><input [(ngModel)]="item.price"></td> 
    <td><input [(ngModel)]="item.bonusPrice"></td> 
    <td><input [(ngModel)]="item.kcal"></td> 
    <td><input [(ngModel)]="item.weight"></td> 
    <td><input [(ngModel)]="item.type"></td> 
    <td><input [(ngModel)]="item.status"></td> 
</ng-container> 

oder verwendet nur *ngIf else in jedem <td>:

<td> 
    <span *ngIf="!item.isEdited; else elseBlock"> 
     {{item.name}} 
    </span> 
    <ng-template #elseBlock> 
    <input [(ngModel)]="item.name"> 
    </ng-template> 
</td> 

welche Variante besser in der Leistung und andere Weise :) oder vielleicht gibt es mehr besseren Ansatz?

Answer 1

Warum nicht die Eingaben mit ihrem [(ngModel)] beibehalten und CSS verwenden, um sie zu stylen? Sie könnten ihren Status readOnly umschalten oder deaktivieren und einen einzigen Ansatz beibehalten.

Wenn Sie es in der Vorlage tun möchte, würde ich sagen, die ng-Container-Ansatz wird besser sein, da es ein ganzes Stück anstelle von kleinen Stücken in jedem td ersetzen wird.

Answer 2

Ich habe wirklich keine tatsächlichen Daten, um dies zu unterstützen, aber nur intuitiv, derjenige, der die geringste Menge an Bindungen verwendet, um den Job zu machen, wird wahrscheinlich die "besten" durchführen. Wenn ich all Ihre Beispiele, meins und die anderen Kommentatoren vergleiche, wette ich, Ihr erstes Beispiel wäre das 'Schnellste' um mindestens ein paar Mikrosekunden ....;) Ich weiß nicht genau, wie Angulars Compiler funktioniert - es mag sein speziell für strukturelle Richtlinien über statisch deklarierte HTMl optimieren, wer weiß. Angular hat nicht wirklich die Option, einmal zu binden, es sei denn, Sie deaktivieren die Änderungserkennung vollständig, so dass Bindungen theoretisch "aktiv" bleiben, aber ob dies tatsächlich die Leistung realistisch beeinflusst, weiß ich nicht. Ich würde wetten, dass Sie ein Los gebundene Elemente auf dem Bildschirm haben müssten, bevor Sie anfingen, sogar einen kleinen Unterschied zu bemerken.

Normalerweise wird die Zeit, die Sie mit der Codierung und Wartung verbringen, jede Millisekunde, die Sie gewinnen, weit übertreffen, indem Sie sie bis zum Äußersten optimieren. Daher ist die beste Optimierung normalerweise diejenige, die sie am einfachsten zu lesen macht! :-) In diesem Sinne würde ich den folgenden Ansatz verwenden, da es die Wiederholung von Variablen und HTML-Elementen so weit wie möglich vermeidet.

<ng-container *ngFor="let key of ['name','price','bonusPrice','kcal','weight','type','status']"> 

    <td *ngIf="!item.isEdited">      {{item[key]}  </td> 
    <td *ngIf="item.isEdited" > <input [(ngModel)]="item[key]" /> </td> 

</ng-container> 

über einen entsprechenden Hinweis ... Ich verstehe nicht wirklich die Motivation des Winkels Teams der ngIf/else-Anweisung hinter hinzufügen. Ich habe noch keinen Fall gesehen, in dem die Verwendung einer ngIf/else-Anweisung etwas tat, was einfach nicht mit entgegengesetzten ngIf-Anweisungen möglich war. Und der ngIf/else-Block sieht endloser aus als nur zwei polare ngIfs zu verwenden, da Sie neue Elemente und Symbole in den Markup-Mix einführen, der nur ein wenig vom visuellen Zusammenhalt ablenkt.