Saya mengalami masalah dengan mencoba menggunakan Angular *ngFordan *ngIfpada elemen yang sama.

Saat mencoba untuk mengulang koleksi di *ngFor, koleksi dilihat sebagai nulldan akibatnya gagal ketika mencoba mengakses propertinya di templat.

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}

Saya tahu solusi mudahnya adalah *ngIfnaik level tetapi untuk skenario seperti pengulangan item daftar ul, saya akan berakhir dengan kosong lijika koleksinya kosong, atau saya lidibungkus dengan elemen kontainer yang berlebihan.

Contoh di plnkr ini .

Perhatikan kesalahan konsol:

EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]

Apakah saya melakukan sesuatu yang salah atau ini bug?

V2 sudut tidak mendukung lebih dari satu arahan struktural pada elemen yang sama.
Sebagai solusinya gunakan <ng-container>elemen yang memungkinkan Anda untuk menggunakan elemen terpisah untuk setiap arahan struktural, tetapi tidak dicap ke DOM .

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>

<ng-template>( <template>Sebelum Angular v4) memungkinkan untuk melakukan hal yang sama tetapi dengan sintaks berbeda yang membingungkan dan tidak lagi direkomendasikan

<ng-template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-template>

Seperti yang semua orang tunjukkan meskipun memiliki beberapa arahan template dalam satu elemen berfungsi dalam angular 1.x itu tidak diizinkan dalam Angular 2. Anda dapat menemukan lebih banyak info dari sini: https://github.com/angular/angular/issues/ 7315

2016 sudut 2 beta

solusinya adalah dengan menggunakan <template>sebagai pengganti, jadi kodenya seperti ini

<template *ngFor="let nav_link of defaultLinks"  >
   <li *ngIf="nav_link.visible">
       .....
   </li>
</template>

tetapi untuk beberapa alasan di atas tidak berfungsi 2.0.0-rc.4jika Anda dapat menggunakan ini

<template ngFor let-nav_link [ngForOf]="defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</template>

Jawaban Diperbarui 2018

Dengan pembaruan, sekarang di 2018 angular v6 merekomendasikan untuk menggunakan, <ng-container>bukan<template>

jadi inilah jawaban yang diperbarui.

<ng-container *ngFor="let nav_link of defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</ng-container>

Seperti @Zyzle sebutkan, dan @ Günter disebutkan dalam komentar ( https://github.com/angular/angular/issues/7315 ), ini tidak didukung.

Dengan

<ul *ngIf="show">
  <li *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </li>
</ul>

tidak ada <li>elemen kosong ketika daftar kosong. Bahkan <ul>elemen tidak ada (seperti yang diharapkan).

Ketika daftar diisi, tidak ada elemen wadah yang berlebihan.

The github diskusi (4792) yang @Zyzle disebutkan dalam komentarnya juga menyajikan solusi lain menggunakan <template>(di bawah Saya menggunakan markup asli Anda - menggunakan <div>s):

<template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</template>

Solusi ini juga tidak memperkenalkan elemen wadah ekstra / berlebihan.

dalam html:

<div [ngClass]="{'disabled-field': !show}" *ngFor="let thing of stuff">
    {{thing.name}}
</div>

dalam css:

.disabled-field {
    pointer-events: none;
    display: none;
}

Anda tidak dapat memiliki ngFordan ngIfpada elemen yang sama. Apa yang bisa Anda lakukan adalah menunda mengisi array yang Anda gunakan ngForsampai sakelar pada contoh Anda diklik.

Inilah cara dasar (tidak hebat) yang bisa Anda lakukan: http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P

Anda tidak dapat menggunakan lebih dari satu Structural Directivedi Angular pada elemen yang sama, itu membuat kebingungan dan struktur yang buruk, jadi Anda perlu menerapkannya dalam 2 elemen bersarang terpisah (atau Anda dapat menggunakan ng-container), baca pernyataan ini dari tim Angular:

Satu arahan struktural per elemen host

Suatu hari Anda akan ingin mengulangi blok HTML tetapi hanya ketika kondisi tertentu benar. Anda akan mencoba meletakkan * ngFor dan * ngIf pada elemen host yang sama. Sudut tidak akan membiarkanmu. Anda dapat menerapkan hanya satu arahan struktural untuk suatu elemen.

Alasannya adalah kesederhanaan. Arahan struktural dapat melakukan hal-hal kompleks dengan elemen host dan turunannya. Ketika dua arahan mengklaim elemen host yang sama, mana yang diutamakan? Yang harus pergi dulu, NgIf atau NgFor? Bisakah NgIf membatalkan efek NgFor? Jika demikian (dan sepertinya memang demikian), bagaimana seharusnya Angular menggeneralisasi kemampuan untuk membatalkan arahan struktural lainnya?

Tidak ada jawaban mudah untuk pertanyaan-pertanyaan ini. Melarang banyak arahan struktural membuat mereka diperdebatkan. Ada solusi mudah untuk kasus penggunaan ini: letakkan * ngIf pada elemen kontainer yang membungkus elemen * ngFor . Satu atau kedua elemen bisa menjadi wadah sehingga Anda tidak perlu memperkenalkan level HTML tambahan.

Jadi Anda dapat menggunakan ng-container(Angular4) sebagai pembungkus (akan dihapus dari dom) atau div atau rentang jika Anda memiliki kelas atau atribut lainnya seperti di bawah ini:

<div class="right" *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

Ini akan berfungsi tetapi elemennya masih di DOM.

.hidden {
    display: none;
}

<div [class.hidden]="!show" *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
</div>

Tabel di bawah ini hanya mencantumkan item yang memiliki set nilai "pemula". Membutuhkan keduanya *ngFordan *ngIfuntuk mencegah baris yang tidak diinginkan dalam html.

Awalnya memiliki *ngIfdan *ngForpada <tr>tag yang sama , tetapi tidak berfungsi. Menambahkan <div>untuk *ngForloop dan ditempatkan *ngIfdi <tr>tag, berfungsi seperti yang diharapkan.

<table class="table lessons-list card card-strong ">
  <tbody>
  <div *ngFor="let lesson of lessons" >
   <tr *ngIf="lesson.isBeginner">
    <!-- next line doesn't work -->
    <!-- <tr *ngFor="let lesson of lessons" *ngIf="lesson.isBeginner"> -->
    <td class="lesson-title">{{lesson.description}}</td>
    <td class="duration">
      <i class="fa fa-clock-o"></i>
      <span>{{lesson.duration}}</span>
    </td>
   </tr>
  </div>
  </tbody>

</table>

Diperbarui ke angular2 beta 8

Sekarang mulai dari angular2 beta 8 kita bisa menggunakan *ngIfdan *ngForpada komponen yang sama lihat di sini .

Bergantian:

Terkadang kami tidak dapat menggunakan tag HTML di dalam yang lain seperti di tr, th( table) atau di li( ul). Kami tidak dapat menggunakan tag HTML lain tetapi kami harus melakukan beberapa tindakan dalam situasi yang sama sehingga kami dapat menggunakan tag fitur HTML5 <template>dengan cara ini.

ngFor menggunakan templat:

<template ngFor #abc [ngForOf]="someArray">
    code here....
</template>

ngIf menggunakan templat:

<template [ngIf]="show">
    code here....
</template>    

Untuk informasi lebih lanjut tentang arahan struktural di angular2 lihat di sini .

<div *ngFor="let thing of show ? stuff : []">
  {{log(thing)}}
  <span>{{thing.name}}</span>
</div>

Anda juga dapat menggunakan ng-template(alih-alih templat. Lihat catatan untuk peringatan menggunakan tag templat) untuk menerapkan * ngFor dan ngIf pada elemen HTML yang sama. Berikut adalah contoh di mana Anda dapat menggunakan * ngIf dan * ngFor untuk elemen tr yang sama di tabel sudut.

<tr *ngFor = "let fruit of fruiArray">
    <ng-template [ngIf] = "fruit=='apple'>
        <td> I love apples!</td>
    </ng-template>
</tr>

mana fruiArray = ['apple', 'banana', 'mango', 'pineapple'].

catatan:

Peringatan menggunakan templatetag bukan ng-templatetag adalah bahwa ia melempar StaticInjectionErrordi beberapa tempat.

Anda tidak dapat menggunakan banyak arahan struktural pada elemen yang sama. Bungkus elemen Anda ng-templatedan gunakan satu arahan struktural di sana

Anda dapat melakukan ini dengan cara lain dengan memeriksa panjang array

<div *ngIf="stuff.length>0">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

app.component.ts

import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'ngif-example',
  template: `
<h4>NgIf</h4>
<ul *ngFor="let person of people">
  <li *ngIf="person.age < 30"> (1)
  {{ person.name }} ({{ person.age }})
  </li>
</ul>
`
})
class NgIfExampleComponent {

  people: any[] = [
    {
      "name": "yogesh ",
      "age": 35
    },
    {
      "name": "gamesh",
      "age": 32
    },
    {
      "name": " Meyers",
      "age": 21
    },
    {
      "name": " Ellis",
      "age": 34
    },
    {
      "name": " Tyson",
      "age": 32
    }
  ];
}

app.component.html

<ul *ngFor="let person of people" *ngIf="person.age < 30">
  <li>{{ person.name }}</li>
</ul>

Keluaran

Meyers(21)