[Angular] * ngIf 및 * ngFor 오류를 일으키는 동일한 요소



Answers

언급 된 @ Zyzle과 @ Günter는 의견 ( https://github.com/angular/angular/issues/7315 )에서 언급했으나 지원되지 않습니다.

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

목록이 비어 있으면 빈 <li> 요소가 없습니다. <ul> 요소조차 존재하지 않습니다 (예상대로).

목록이 채워지면 중복되는 컨테이너 요소가 없습니다.

@ Zyzle이 그의 주석에서 언급 한 github 토론 (4792)<template> 사용하는 또 다른 해결책을 제시합니다 (아래에서 <div> 를 사용하여 원래 마크 업을 사용하고 있습니다).

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

이 솔루션은 또한 여분 / 중복 컨테이너 요소를 도입하지 않습니다.

Question

동일한 요소에 Angular의 *ngFor*ngIf 를 사용하는 데 문제가 있습니다.

*ngFor 에서 콜렉션을 반복 할 때 콜렉션은 null 것으로 간주되어 결과적으로 템플리트의 해당 특성에 액세스하려고 할 때 실패합니다.

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

}

쉬운 해결책은 *ngIf 를 레벨로 이동하는 것이지만 ul 목록 항목을 반복하는 것과 같은 시나리오의 경우 콜렉션이 비어있는 경우 비어있는 li 끝나고 리던던트 컨테이너로 래핑 된 경우 집단.

plnkr 예.

콘솔 오류에 유의하십시오.

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

제가 잘못했거나 버그입니까?




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



angular2 베타 8로 업데이트되었습니다.

이제 angular2 베타 8 *ngFor 동일한 구성 요소에서 *ngIf*ngFor 를 사용할 수 있습니다 .

번갈아 하는:

tr , th ( table ) 또는 li ( ul )에서 HTML 태그를 사용할 수없는 경우가 있습니다. 다른 HTML 태그를 사용할 수는 없지만 동일한 상황에서 일부 작업을 수행해야하므로 HTML5 기능 태그 <template> 를 이러한 방식으로 사용할 수 있습니다.

ngFor 템플릿 사용 :

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

템플릿 사용 중 :

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

angular2의 구조 지시문에 대한 자세한 내용 은 여기를 참조하십시오 .




동일한 요소에 ngForngIf 를 사용할 수 없습니다. 수행 할 수있는 작업은 예제의 토글을 클릭 할 때까지 ngFor 에서 사용중인 배열을 채우는 것입니다.

다음과 같이 기본적인 (좋지는 않은) 방법이 있습니다. http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P




아래 표는 "초보자"값이 설정된 항목 만 나열합니다. *ngFor*ngFor 모두 사용하면 html에서 원치 않는 행을 방지 할 수 있습니다.

원래 <tr> 태그에는 *ngIf*ngFor 가 있지만 작동하지 않습니다. *ngFor 루프에 <div> 를 추가하고 <tr> 태그에 *ngIf 를 배치하면 예상대로 작동합니다.

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



Links