角度2:结合* ngIf和* ngFor使用最后一个未定义的项目执行循环 [英] angular 2: combining *ngIf and *ngFor executes loop with a last undefined item

问题描述

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

正如在这个插件中所看到的那样，第二个* ngFor将被执行一次.

As it can be seen in this plunkr, the second *ngFor will be executed one too many times.

现在这是一个错误吗?还是我只是禁止一起使用* ngFor和* ngIf?我找不到与此有关的任何文档.

Now is this a bug? Or am I just forbidden from using *ngFor and *ngIf together? I could not find any documentation on this.

推荐答案

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

*ngIf and *ngFor on the same element are not supported.
As workaround you can use:

更新(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>

这篇关于角度2:结合* ngIf和* ngFor使用最后一个未定义的项目执行循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！