角度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({
	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

假设您的<span>逻辑为*ngFor，您可以使用first中的*ngFor并<span> <显示/隐藏*ngIf < / p>

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

您的工作 plunker 。

Answer 2

＆＃13;

＆＃13;

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
  }];
  }
  
}

＆＃13;

＆＃13;

＆＃13;

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告诉您项目列表中当前项目的索引。您可以使用该索引来显示或隐藏“删除”＃39;文本。由于第一个项目的索引为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，该变量将映射到{{}输出的项目的当前索引1}}。然后，您可以根据需要测试该值以显示/隐藏元素。

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

See the documentation for more info about ngFor

Answer 4

见这里：

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

你需要这样的条件：

*ngIf="i !== 1"