角2で最初の要素を非表示にする* ngForとngIfで

Question

角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内のロジックを持っていると仮定します*ngForショーからfirstを使用することができます/ <span>

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

*ngIfすることにより、作業 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 { .... } 

icテンプレートを使用すると、* ngForこのHTMLの複数のバージョンをスタンプアウトすることができます。itemsコレクションの各アイテムに1つずつスタンプします。すなわち、最初の項目 - パズルの最後のピースは、あなただけのコレクション内の特定の項目についてremoveテキストを表示したいということです

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

：あなたのように見えるテンプレートを与える

。ありがたいことに、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 { .... } 

お知らせngFor文で変更を - let i=indexを使用することにより、次の方法で出力されているアイテムの現在のインデックスにマッピングされるローカルテンプレート変数iを作成していますngFor。次に、その値に対してテストして、必要に応じて要素を表示/非表示にすることができます。

（ngForがfirst、last、evenとあなたもそれが最も広い到達用法を持っているので。私は、この例ではindexを使用を使用することができodd変数を提供し、indexに加えてなお、しかし、あなたはしましたができ簡単にこのユースケースのためにfirstを使用していました。

See the documentation for more info about ngFor