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