Question

我有一个包含许多cols的大表，以及用于更改编辑模式的按钮，例如：

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

或仅在每个*ngIf else中使用<td>：

<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

我真的没有任何实际数据来支持这一点，但直观地说，使用最少数量的绑定来完成工作的人可能会执行最好的＆＃34; 。比较你的所有例子，我和其他评论者，我打赌你的第一个例子是“最快的”和＃39;至少几微秒......;）我对Angular编译器的工作方式没有深入的了解 - 它可以专门针对静态声明的HTMl优化结构指令，谁知道。 Angular并没有真正选择一次＆＃39;除非你完全禁用变化检测，所以任何绑定在理论上都会保持“活跃”，但至于这是否真实地影响了性能，我不知道。我敢打赌你必须在屏幕上有一个很多的绑定元素才能开始注意到一点点差异。

通常，您将编码和维护它所花费的时间远远超过您通过将其优化到极致所获得的任何毫秒数，因此最佳优化通常是使其最容易阅读的优化！ :-)考虑到这一点，我使用以下方法，因为它避免了尽可能重复变量和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更复杂，因为您将新元素和符号引入标记混合中，这有点分散了视觉凝聚力。

Angular 4 ng-container vs * ngIf else

2 个答案: