web-dev-qa-db-ja.com

Angular 2に余分な要素なしでngIfを使用する

追加のコンテナ要素なしでngIfを使用できますか？

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

無効なHTMLが作成されるため、テーブルでは機能しません。

htmltemplatesangular
85
janispritzkau

ng-containerはtemplateよりも優先されます：

<ng-container *ngIf="expression">

見る：

Angular 2 ng-container

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

131
Alexander Taylor

そのためのメソッドを見つけました： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template 。

単純に<template>タグを使用して、*ngIfを[ngIf]に置き換えることができます。

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

divをtrの中に直接配置することはできません。これは無効なHTMLになります。 trにはtd/th/table要素のみを含めることができ、その中には他のHTML要素を含めることができます。

*ngFor over tbodyを持つようにHTMLをわずかに変更し、以下のようにngIf over tr自体を持つようにすることができます。

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