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

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

来源

2017-08-07 user3334871

如果你知道它的只有第一列表中的元素，那么你可以使用*ngFor描述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

来源

2017-08-07 16:26:54 0mpurdy

我会试试这个，谢谢！从未想过要使用索引本身:)。是的，第一个元素是全局的，并且应该总是存在并且永远不会被修改，因为它首先被加载到列表中，并且用户不应该编辑它。在提交时，如果该元素不存在，我会验证它，并想知道可能发生了什么修改此项:)。如果它在我测试时有效，我会将其更新为答案！ – user3334871

@ user3334871请注意：代码中存在错误（我现在已修复此错误），并且现在有一个实时演示程序来演示它 – 0mpurdy

什么0mpurdy建议是伟大的index选项，只是想提请注意，也可以使用first（这里借用0mpurdys代码）：

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

来源

2017-08-09 13:35:49 Alex

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

回答

相关问题