带有 *ngFor 和 ngIf 的 Angular 2 隐藏第一个元素

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({
	selector: 'app',
	template: `
	  
    <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>
	  </ul>
	 
	`
})
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

假设您在*ngFor 逻辑中有一个<span>，您可以使用*ngFor 中的first 并通过*ngIf 显示/隐藏<span>

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

你的工作plunker。

Answer 2

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

@Component({
	selector: 'app',
	template: `
	  
    <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>
	  </ul>
	 
	`
})
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 3

在对您的模板进行一些破译后，我认为您的项目集合中单个项目的基本 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 { .... }

如果这是您的单个项目的基本模板，那么您可以使用 *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，因此您的 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 输出的项目的当前索引。然后，您可以根据需要测试该值以显示/隐藏元素。

（请注意，除了index，ngFor 还提供了first、last、even 和odd 变量，您也可以使用这些变量。我在此示例中使用了index，因为它具有最广泛的用途，但您可以轻松地将 first 用于此用例。

See the documentation for more info about ngFor

Answer 4

看这里：

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

你需要这样的条件：

*ngIf="i !== 1"