Winkel 2: Kombinieren * ngIf und * ngFor führt Schleife mit einem letzten Elemente undefinierten

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

Wie es in diesem plunkr zu sehen ist, wird der zweite * ngFor einmal zu oft ausgeführt werden.

Jetzt ist das ein Fehler? Oder darf ich * ngFor und * ngIf nicht zusammen verwenden? Ich konnte dazu keine Dokumentation finden.

Answer 1

*ngIf und *ngFor auf demselben Element werden nicht unterstützt.
Als Abhilfe Sie verwenden können:

Update (2.0.0)

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

original

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

Answer 2

Sie können auch diese

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

verwenden