Javascript 角度2，带*ngFor和ngIf以隐藏第一个元素

在Angular 2中，我得到了一个项目列表，并且基于给定的条件（即基于位置号），我将列表设置为重复

我需要为每个位置的第一个框隐藏“删除文本”

Plunker: :

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序”，
模板：`

位置{{item.location}}删除
{{item.sedule}

`
})
导出类应用程序{
项目：字符串[]；
isNotFirst（项目：任何）{
返回此.items.filter（i=>i.location==item.location）.map（i=>i.id）.indexOf（item.id）！==0；
}
地点：任何地点；
构造函数（）{
this.locations=[{location:1}，{location:2}，{location:3}]；
此项。项目=[{
id:1，
地点:1,，
小穗：1
},
{
id:2，
地点：2，
小穗：1
},
{
id:3，
地点:1,，
小穗：2
},
{
id:4，
地点：2，
小穗：2
},
{
id:5，
地点:1,，
小穗：2
},
{
id:6，
地点：2，
小穗：3
},  {
id:7，
地点:3,，
小穗：1
},
{
id:8，
地点:3,，
小穗：2
},
{
id:9，
地点:3,，
小穗：3
}];
}
}

假设您在

*ngFor

逻辑中有一个

，您可以首先使用

*ngFor

中的

并通过
*ngIf
显示/隐藏

<div *ngFor="let item in data; let first=first;">
  {{item.attr}}
  <span *ngIf="!first">
    remove
  </span>
</div>


{{item.attr}
去除

您的工作请参见此处：


您需要以下条件：

*ngIf="i !== 1"

在对模板进行了一些解密之后，我认为items集合中单个项目的基本html如下所示：

@Component({
    selector: 'app',
    template: `
      <h4>Syntax 1</h4>
       <div>
          <div class="title"> 
             location  {{ item.location}} 
             <span *ngIf="true">remove</span> 
          </div>
          <div class="container">
             {{ item.sedule}}
          </div>
        </div>
    `
})
export class App { .... }

@Component({
    selector: 'app',
    template: `
      <h4>Syntax 1</h4>
       <div *ngFor="let item of items">
          <div class="title"> 
             location  {{ item.location}} 
             <span *ngIf="true">remove</span> 
          </div>
          <div class="container">
             {{ item.sedule}}
          </div>
        </div>
    `
})
export class App { .... }

拼图的最后一块是，您只想显示集合中特定项目的
remove
文本，即第一个项目。谢天谢地，
ngFor
解决了同样的问题-您可以要求
ngFor
告诉您项目列表中当前项目的索引。您可以利用该索引显示或隐藏“删除”文本。由于第一项的索引为0，因此您的
ngIf
测试将针对该值进行测试

这给了你：

@Component({
    selector: 'app',
    template: `
      <h4>Syntax 1</h4>
    <ul>
       <div *ngFor="let item of items; let i=index;">
          <div class="title"> 
             location  {{ item.location}} 
             <span *ngIf="i != 0">remove</span> 
          </div>
          <div class="container">
             {{ item.sedule}}
          </div>
        </div>
    </ul>
    `
})
export class App { .... }

@组件({
选择器：“应用程序”，
模板：`
语法1

位置{{item.location}
去除
{{item.sedule}

`
})
导出类应用程序{….}

注意ngFor语句中的更改-通过使用
let i=index
，您正在创建一个本地模板变量
i
，该变量将映射到由
ngFor
输出的项的当前索引。然后，如果需要，可以根据该值进行测试以显示/隐藏元素

（注意，除了
索引
，
ngFor
提供了
第一个
，
最后一个
，
偶数
和
奇数
变量，您也可以使用这些变量。在本例中，我使用了
索引
，因为它具有最广泛的用途，但您可以轻松地在本用例中使用
第一个
）


从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序”，
模板：`

位置{{item.location}}删除
{{item.sedule}

`
})
导出类应用程序{
项目：字符串[]；
isNotFirst（项目：任何）{
返回此.items.filter（i=>i.location==item.location）.map（i=>i.id）.indexOf（item.id）！==0；
}
地点：任何地点；
构造函数（）{
this.locations=[{location:1}，{location:2}，{location:3}]；
此项。项目=[{
id:1，
地点:1,，
小穗：1
},
{
id:2，
地点：2，
小穗：1
},
{
id:3，
地点:1,，
小穗：2
},
{
id:4，
地点：2，
小穗：2
},
{
id:5，
地点:1,，
小穗：2
},
{
id:6，
地点：2，
小穗：3
},  {
id:7，
地点:3,，
小穗：1
},
{
id:8，
地点:3,，
小穗：2
},
{
id:9，
地点:3,，
小穗：3
}];
}
}
我想你可以先在
元素中添加一个类，然后通过CSS隐藏它？（参见：）你将如何添加我无法获得的逻辑。我们也可以使用[hidden]来实现这一点，但是[hidden]=无法找到条件。请检查plnkr代码，您将获得主requirement@B.V.SBharatKumar在我的回答中检查plunker。对于位置2，它已删除，但对于位置1列表，它未检查链接。请检查一次：我们有两个位置plnkr.co/edit/lu37lt6Y9pe5dlOxXEZx？p=preview–@B.V.SBharatKumar让我检查一下。请稍等。检查此plnkr您将获得主IDEA我们有两个位置而不是单个请检查一次链接：我们有两个位置，它是*ngIf=“i！==0”请检查我们需要为每个位置隐藏删除请检查我们需要为每个位置隐藏删除您不再需要let-i=索引。
模板
在Angular4中被弃用。使用
ng模板
。虽然此代码可能会回答问题，但提供有关如何和/或为什么解决问题的附加上下文将影响验证答案的长期价值。
@Component({
    selector: 'app',
    template: `
      <h4>Syntax 1</h4>
    <ul>
       <div *ngFor="let item of items; let i=index;">
          <div class="title"> 
             location  {{ item.location}} 
             <span *ngIf="i != 0">remove</span> 
          </div>
          <div class="container">
             {{ item.sedule}}
          </div>
        </div>
    </ul>
    `
})
export class App { .... }