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


107

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

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

これはテーブルでは機能しません。HTMLが無効になるためです。

回答:



21

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

あなたは、単に使用することができ<template>、タグをして置き換える*ngIf[ngIf]、次のように。

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

良いが* ngiflelefがtemplateタグを作成する場合、デフォルトでは、*を前に付けた角度ディレクティブの前にテンプレートタグが作成されます。両方が同じ[ngIf] and *ngIf
Pardeep Jain

1
では*ngIfテンプレート内の要素を持っているあなたが書く場合、あなたはそうではないtemplate自分自身を。特定の状況下では、追加の要素が干渉する可能性があります。
チーク

/ タグのtemplate中にタグを入れることはできますか?trtd
Pankaj Parkar

はい、それは一種の特別な要素です。定義により、w3.org / TR / html401 / struct / tables.html#h-11.2.3は許可されていませんが、機能してレンダリングされます。Iamが* ngIfを使用している場合は、機能しません。しかし、[ngIf]を使用します。その理由を教えていただけませんか。
sascha10000

1
@ sascha10000持つこと*ngIf="foo"はラッピング<template [ngIf]="foo">タグと同等だからです。つまり、template+ []== *なので、[]!= *です。以外の*すべての要素で意味があります。 template
フランクリンユー

4

div内に直接配置することはできませんtr。HTMLが無効になります。trだけ持つことができますtd/ th/ tableそれに要素を&それらの内側に、あなたは他のHTML要素を持つことができます。

あなたは少し持っているあなたのHTMLを変更することができ*ngForオーバーtbody&持っているngIf上でtr以下のように自分自身。

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

それは基本的に問題を解決しますが、tbodyで得られるコア能力をトレードオフします。大きなテーブルがある場合は、頭を固定してtbodyをスクロールするだけです。tbodyにはtrの役割があり、trには追加のラッパーの役割があります。頭を上にスクロールして固定する必要がない場合、これは実用的なソリューションです。私が言ったことの私の参照:w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.