angular 2：结合 ngIf 和 ngFor 执行带有最后一个未定义项的循环

Question

http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

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

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <div *ngFor="let v of myValues;">
        This is my value: {{v}}
      </div>

      <hr>

      <div *ngIf="show" *ngFor="let v of myValues;">
        This is my value: {{v}}
      </div>


  `,
})
export class AppComponent {
  public user: User = {
    name: 'John',
    address: {
      address1: '11, High Street',
      postcode: '1234'
    }
  }

  myValues = ['one','two','three'];
  show = true;


  public save(form: IUser, isValid: boolean) {
    console.log(form, isValid);
  }
}

export interface User {
  name: string;
  address?: {
    address1?: string;
    postcode?: string;
  }
}

从这个plunkr中可以看出，第二个*ngFor将被执行多次。

现在这是一个错误吗？或者我只是被禁止一起使用 *ngFor 和 *ngIf ？我找不到任何关于此的文档。

Answer 1

不支持同一元素上的

*ngIf 和 *ngFor。
作为解决方法，您可以使用：

更新 (2.0.0)

  <ng-container *ngIf="show">
    <div *ngFor="let v of myValues;">
      This is my value: {{v}}
    </div>
  </ng-container>

原创

~~<template [ngIf]="show"> <div *ngFor="let v of myValues;"> This is my value: {{v}} </div> </template>~~

Answer 2

你也可以用这个

<template let-v ngFor [ngForOf]="myValues">
        <div *ngIf="show">
          This is my value: {{v}}
        </div>
</template>

angular 2：结合 ngIf 和 ngFor 执行带有最后一个未定义项的循环

angular 2: combining ngIf and ngFor executes loop with a last undefined item

angular2-template

angular

angular 2：结合 *ngIf 和 *ngFor 执行带有最后一个未定义项的循环

angular 2: combining *ngIf and *ngFor executes loop with a last undefined item

angular2-template

angular

angular 2：结合 ngIf 和 ngFor 执行带有最后一个未定义项的循环

angular 2: combining ngIf and ngFor executes loop with a last undefined item