Angular 2隐藏列表中的某些元素答案

【问题标题】：Angular 2 hiding certain elements in a listAngular 2隐藏列表中的某些元素
【发布时间】：2017-08-07 16:21:44
【问题描述】：

我有一个 Angular 2 应用程序，它在表格中显示名称列表，最右边的列显示一行图标，这些图标是用户可以选择的操作。通过选择编辑图标，将显示一个弹出窗口，允许他们编辑列表中的条目。但是，对于某些名称，我想禁用该选项。除了创建第二个布尔值列表来隐藏和显示图标（Based on this SO answer），我该怎么做呢？我知道事实上只有第一个元素不应该被编辑（因为它是为用户预加载的），所以使用链接中的答案似乎是一个糟糕的解决方案。

【问题讨论】：

标签： angular

【解决方案1】：

如果您知道它只是列表中的第一个元素，那么您可以使用*ngFor 中描述的index 中的index 选项here in the documentation

<div *ngFor="let hero of heroes; let i=index;">
  ({{i}}) {{hero.name}}
  <ng-container *ngIf="i !== 0">
    Show edit
  </ng-container>
</div>

Live plunk

【讨论】：

我会试试这个，谢谢！从没想过要使用索引本身:)。是的，第一个元素是全局的，并且应该始终存在并且永远不会修改，因为它首先加载到列表中，并且用户不应该编辑它。在提交时，如果该元素不存在，我会对其进行验证，并想知道修改此项目会发生什么:)。如果它在我测试时有效，我会将其更新为答案！
@user3334871 请注意：代码中有一个错误（我现在已经修复），现在有一个现场演示

【解决方案2】：

0mpurdy 的建议很棒，只是想引起注意，您也可以使用first（这里借用 0mpurdys 代码）：

<div *ngFor="let hero of heroes; let first=first">
  {{hero.name}}
  <ng-container *ngIf="!first">
    Show edit
  </ng-container>
</div>

【讨论】：