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更加复杂，因为您正在将新的元素和符号引入标记混合中，这只是分散了视觉凝聚力。