Angular 2에서 추가 요소 없이 ngIf 사용

Angular 2에서 추가 요소 없이 ngIf 사용

사용할 수 있습니까?ngIf추가 컨테이너 요소 없이?

<tr *ngFor="...">
  <div *ngIf="...">
    ...
  </div>
  <div *ngIf="!...">
    ...
  </div>
</tr>

테이블에서 작동하지 않습니다. 그러면 HTML이 비활성화되기 때문입니다.

ng-container보다 선호되는template:

<ng-container *ngIf="expression">

참조:

앵귤러 2 ng-컨테이너

https://github.com/angular/angular.io/issues/2303

저는 그것에 대한 방법을 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template 에서 찾았습니다.

간단히 사용할 수 있습니다.<template>태그 및 교체*ngIf와 함께[ngIf]이것처럼.

<template [ngIf]="...">
  ...
</template>

놓을 수 없습니다.div바로 안쪽에trHTML을 비활성화할 수 있습니다.tr을 가질 수 밖에 없습니다.td/th/table그 안의 요소들과 그 안에 당신은 다른 HTML 요소들을 가질 수 있습니다.

당신은 당신의 HTML을 약간 변경할 수 있습니다.*ngFor위에tbody을 가지다ngIf위에tr그 자체가 아래와 같습니다.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>

브래킷을 추가하면 이 문제가 해결됩니다.

 <ng-container *ngIf="(!variable| async)"></ng-container>

사용해 볼 수 있습니다.

<ng-container *ngFor="let item of items;">
    <tr *ngIf="item.active">
        <td>{{item.name}}</td>
    </tr>
 </ng-container>
 

여기에는 반복 루프 컨테이너가 있어 여분의 돔이 생성되지 않고 나중에 렌더링 여부를 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/36376001/using-ngif-without-an-extra-element-in-angular-2