Angular 4 ng容器vs * ng

Question

我有一張大桌子，上面有許多列，還有一些按鈕可以更改編輯模式，例如：

<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>
...

哪個變種更好，創建2 ng-container

<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>

或僅在每個<td>使用*ngIf else ：

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

哪個變體在性能上和其他方法上都更好：)還是有更好的方法？

Answer 1

為什么不保留輸入的[[ngModel）]並使用CSS設置樣式？ 您可以切換其readOnly狀態或將其禁用，並保持單一方法。

如果要在模板中執行此操作，我會說ng-container方法會更好，因為它將替換整個大塊而不是每個td中的小塊。

Answer 2

我實際上沒有任何實際數據可以支持這一點，但是就直覺而言，使用最少數量的綁定來完成這項工作的人可能會執行“最佳”操作。 比較您的所有示例，我的示例和其他評論者，我敢打賭，您的第一個示例將是“最快的”至少至少幾微秒的時間……。;）我對Angular的編譯器的工作原理不甚了解-它可能知道，專門針對靜態聲明的HTM1優化結構指令。 除非完全禁用更改檢測，否則Angular實際上沒有“綁定一次”的選項，因此，從理論上講，任何綁定都將保持“活動”狀態，但是我不知道這是否實際上影響性能。 我敢打賭，在您開始注意到甚至稍有不同之前，屏幕上就必須有很多綁定元素。

通常，您花費在編碼和維護上面的時間將遠遠超過通過優化它獲得的任何毫秒數，因此最佳的優化通常是使其最容易閱讀的優化！ :-)考慮到這一點，我將使用以下方法，因為它盡可能避免了變量和HTML元素的重復。

 <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>

在相關說明中...我不太了解角度小組在添加ngIf / else語句后的動機。 我還沒有看到使用ngIf / else語句執行僅使用相反的ngIf語句無法執行的操作的情況。 ngIf / else塊最終看起來比僅使用兩個極性ngIf更加復雜，因為您正在將新的元素和符號引入標記混合中，這只是分散了視覺凝聚力。