Tôi đang gặp vấn đề với việc cố gắng sử dụng Angular *ngForvà *ngIftrên cùng một yếu tố.

Khi cố gắng lặp qua bộ sưu tập trong *ngFor, bộ sưu tập được xem là nullvà do đó không thành công khi cố gắng truy cập các thuộc tính của nó trong mẫu.

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

}

Tôi biết giải pháp dễ dàng là *ngIftăng cấp độ nhưng đối với các tình huống như lặp qua các mục trong danh sách ul, tôi sẽ kết thúc bằng một khoảng trống linếu bộ sưu tập trống hoặc ligói của tôi được bọc trong các phần tử container dự phòng.

Ví dụ tại plnkr này .

Lưu ý lỗi giao diện điều khiển:

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

Tôi đang làm gì đó sai hay đây là một lỗi?

Angular v2 không hỗ trợ nhiều hơn một chỉ thị cấu trúc trên cùng một phần tử.
Như một cách giải quyết, sử dụng <ng-container>phần tử cho phép bạn sử dụng các phần tử riêng biệt cho mỗi chỉ thị cấu trúc, nhưng nó không được đóng dấu vào DOM .

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

<ng-template>( <template>trước Angular v4) cho phép thực hiện tương tự nhưng với một cú pháp khác gây nhầm lẫn và không còn được khuyến nghị

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

Như mọi người đã chỉ ra mặc dù có nhiều chỉ thị mẫu trong một yếu tố duy nhất hoạt động ở góc 1.x, nó không được phép trong Angular 2. bạn có thể tìm thêm thông tin từ đây: https://github.com/angular/angular/issues/ 7315

2016 góc cạnh 2 beta

Giải pháp là sử dụng <template>như một trình giữ chỗ, vì vậy mã đi như thế này

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

nhưng vì một số lý do ở trên không hoạt động trong 2.0.0-rc.4trường hợp đó bạn có thể sử dụng cái này

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

Cập nhật câu trả lời 2018

Với các bản cập nhật, ngay bây giờ trong năm 2018 góc v6 khuyên bạn nên sử dụng <ng-container>thay vì<template>

Vì vậy, đây là câu trả lời cập nhật.

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

Như @Zyzle đã đề cập và @ Günter đã đề cập trong một nhận xét ( https://github.com/angular/angular/issues/7315 ), điều này không được hỗ trợ.

Với

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

không có <li>phần tử trống khi danh sách trống. Ngay cả các <ul>yếu tố không tồn tại (như mong đợi).

Khi danh sách được điền, không có phần tử container dự phòng.

Cuộc thảo luận về github (4792) mà @Zyzle đã đề cập trong bình luận của anh ấy cũng trình bày một giải pháp khác bằng cách sử dụng <template>(bên dưới tôi đang sử dụng đánh dấu ban đầu của bạn - sử dụng <div>s):

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

Giải pháp này cũng không giới thiệu bất kỳ yếu tố container thừa / dự phòng.

trong html:

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

trong css:

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

Bạn không thể có ngForvà ngIftrên cùng một yếu tố. Những gì bạn có thể làm là giữ lại việc điền vào mảng bạn đang sử dụng ngForcho đến khi bật nút trong ví dụ của bạn.

Đây là một cách cơ bản (không tuyệt vời) mà bạn có thể làm: http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P

Bạn không thể sử dụng nhiều hơn một Structural Directivetrong Angular trên cùng một phần tử, điều này gây nhầm lẫn và cấu trúc xấu, vì vậy bạn cần áp dụng chúng trong 2 phần tử lồng nhau riêng biệt (hoặc bạn có thể sử dụng ng-container), đọc câu này từ nhóm Angular:

Một chỉ thị cấu trúc cho mỗi phần tử máy chủ

Một ngày nào đó bạn sẽ muốn lặp lại một khối HTML nhưng chỉ khi một điều kiện cụ thể là đúng. Bạn sẽ cố gắng đặt cả * ngFor và * ngNếu trên cùng một phần tử máy chủ. Angular sẽ không cho phép bạn. Bạn chỉ có thể áp dụng một chỉ thị cấu trúc cho một phần tử.

Lý do là sự đơn giản. Chỉ thị cấu trúc có thể làm những điều phức tạp với yếu tố chủ và con cháu của nó. Khi hai chỉ thị đặt yêu cầu cho cùng một phần tử máy chủ, cái nào được ưu tiên? Cái nào nên đi trước, Ng If hay NgFor? NgNếu có thể hủy tác dụng của NgFor không? Nếu vậy (và có vẻ như nó phải như vậy), Angular nên khái quát hóa khả năng hủy bỏ cho các chỉ thị cấu trúc khác như thế nào?

Không có câu trả lời dễ dàng cho những câu hỏi này. Cấm nhiều chỉ thị cấu trúc làm cho chúng moot. Có một giải pháp dễ dàng cho trường hợp sử dụng này: đặt * ng If trên phần tử container chứa phần tử * ngFor . Một hoặc cả hai yếu tố có thể là một ng-container để bạn không phải giới thiệu các cấp độ HTML bổ sung.

Vì vậy, bạn có thể sử dụng ng-container(Angular4) làm trình bao bọc (sẽ bị xóa khỏi dom) hoặc div hoặc span nếu bạn có lớp hoặc một số thuộc tính khác như dưới đây:

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

Điều này sẽ hoạt động nhưng phần tử vẫn sẽ trong DOM.

.hidden {
    display: none;
}

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

Bảng bên dưới chỉ liệt kê các mục có giá trị "người mới bắt đầu". Yêu cầu cả *ngForvà *ngIfđể ngăn các hàng không mong muốn trong html.

Ban đầu có *ngIfvà *ngFortrên cùng một <tr>thẻ, nhưng không hoạt động. Thêm một <div>cho *ngForvòng lặp và được đặt *ngIftrong <tr>thẻ, các công trình như mong đợi.

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

Đã cập nhật lên angular2 beta 8

Bây giờ, từ angular2 beta 8, chúng ta có thể sử dụng *ngIfvà *ngFortrên cùng một thành phần xem tại đây .

Luân phiên:

Đôi khi, chúng ta không thể sử dụng các thẻ HTML bên trong một thẻ khác như in tr, th( table) hoặc in li( ul). Chúng tôi không thể sử dụng thẻ HTML khác nhưng chúng tôi phải thực hiện một số hành động trong cùng một tình huống để chúng tôi có thể gắn thẻ tính năng HTML5 <template>theo cách này.

ngFor sử dụng mẫu:

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

ngNếu sử dụng mẫu:

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

Để biết thêm thông tin về các chỉ thị cấu trúc trong angular2 xem tại đây .

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

Bạn cũng có thể sử dụng ng-template(thay vì mẫu. Xem ghi chú cho cảnh báo sử dụng thẻ mẫu) để áp dụng cả * ngFor và ng If trên cùng một phần tử HTML. Dưới đây là một ví dụ nơi bạn có thể sử dụng cả * ng If và * ngFor cho cùng một phần tử tr trong bảng góc.

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

nơi fruiArray = ['apple', 'banana', 'mango', 'pineapple'].

Ghi chú:

Nhắc nhở của việc chỉ sử dụng templatethẻ thay vì ng-templatethẻ là nó ném StaticInjectionErrorở một số nơi.

Bạn không thể sử dụng nhiều chỉ thị cấu trúc trên cùng một yếu tố. Gói phần tử của bạn vào ng-templatevà sử dụng một chỉ thị cấu trúc ở đó

Bạn có thể làm điều này theo cách khác bằng cách kiểm tra độ dài mảng

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

Đầu ra

Meyers(21)