Angular 2使用* ngFor和ngIf隐藏第一个元素

Question

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

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

Plunker： https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN?p=preview：

[1]: https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN?p=preview 

import {Component} from '@angular/core'; 
 

 
@Component({ 
 
\t selector: 'app', 
 
\t template: ` 
 
\t 
 
    <ul *ngFor="let locdata of locations"> 
 
    
 
    <template ngFor let-item [ngForOf]="items"; let-i=index> 
 
      <div *ngIf="item.location==locdata.location"> 
 
      <div class="title"> location {{ item.location}} <span *ngIf="isNotFirst(item)"> remove </span> </div> 
 
      <div class="container"> {{ item.sedule}}</div> 
 
     </div> 
 
     </template> 
 
\t </ul> 
 
\t 
 
\t ` 
 
}) 
 
export class App { 
 
    items: string[]; 
 
    
 
    isNotFirst(item: any) { 
 
     return this.items.filter(i => i.location === item.location).map(i => i.id).indexOf(item.id) !== 0; 
 
    } 
 
    
 
    locations:any; 
 
    
 
    constructor() { 
 
    this.locations=[{location:1},{location:2},{location:3}]; 
 
    
 
    this.items = [{ 
 
    id:1, 
 
    location:1, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:2, 
 
    location:2, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:3, 
 
    location:1, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:4, 
 
    location:2, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:5, 
 
    location:1, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:6, 
 
    location:2, 
 
    sedule:3 
 
    }, { 
 
    id:7, 
 
    location:3, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:8, 
 
    location:3, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:9, 
 
    location:3, 
 
    sedule:3 
 
    }]; 
 
    } 
 
    
 
}

Answer 1

import {Component} from '@angular/core'; 
 

 
@Component({ 
 
\t selector: 'app', 
 
\t template: ` 
 
\t 
 
    <ul *ngFor="let locdata of locations"> 
 
    
 
    <template ngFor let-item [ngForOf]="items"; let-i=index> 
 
      <div *ngIf="item.location==locdata.location"> 
 
      <div class="title"> location {{ item.location}} <span *ngIf="isNotFirst(item)"> remove </span> </div> 
 
      <div class="container"> {{ item.sedule}}</div> 
 
     </div> 
 
     </template> 
 
\t </ul> 
 
\t 
 
\t ` 
 
}) 
 
export class App { 
 
    items: string[]; 
 
    
 
    isNotFirst(item: any) { 
 
     return this.items.filter(i => i.location === item.location).map(i => i.id).indexOf(item.id) !== 0; 
 
    } 
 
    
 
    locations:any; 
 
    
 
    constructor() { 
 
    this.locations=[{location:1},{location:2},{location:3}]; 
 
    
 
    this.items = [{ 
 
    id:1, 
 
    location:1, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:2, 
 
    location:2, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:3, 
 
    location:1, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:4, 
 
    location:2, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:5, 
 
    location:1, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:6, 
 
    location:2, 
 
    sedule:3 
 
    }, { 
 
    id:7, 
 
    location:3, 
 
    sedule:1 
 
    }, 
 
    { 
 
    id:8, 
 
    location:3, 
 
    sedule:2 
 
    }, 
 
    { 
 
    id:9, 
 
    location:3, 
 
    sedule:3 
 
    }]; 
 
    } 
 
    
 
}

Answer 2

假设你有一个<span>在*ngFor逻辑，你可以使用first从*ngFor和显示/隐藏<span>通过*ngIf

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

你的工作plunker。

Answer 3

在这里看到：

https://plnkr.co/edit/nMvnonrBjRfq1n8tmfZT?p=preview

都需要这样的条件：

*ngIf="i !== 1" 

Answer 4

做模板的一些解密后，我认为你在你的项目收集单个项目基本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 { .... } 

如果这是你的bas您可以使用* ngFor印出多个版本的HTML，其中一个用于您的items集合中的每个项目。

这就给了你一个模板，看起来像：

@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的索引，那么您的测试将针对该值进行测试。

这就给了你：

@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 { .... } 

请注意，在ngFor声明的变化 - 通过使用let i=index，你要创建一个本地模板变量i将被映射到项目的当前指数为输出ngFor。然后，您可以根据需要测试该值以显示/隐藏元素。

（请注意，除了index，ngFor提供first，last，even和odd变量，你也可以使用。我在这个例子中使用index，因为它具有最广泛深远的用法，但你可能已经容易地使用first对于这种使用情况。

See the documentation for more info about ngFor