角度2のテーブルに異なるテンプレートを追加する

Question

多くの異なるフォームで使用できる汎用のテーブルコントロールを構築しています。ただし、異なる行の一部には異なるテンプレートが必要です。テンプレートタグは私があまり理解していないものです。

私が達成しようとしているのは、それがカレンダーではない場合、それが別のことをしている場合、一つのことをすることです。

私の試み：

<tr *ngFor="let row of rows"> 
    <td *ngIf="canEditRecord"> 
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a> 
    </td> 
    <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td> 
    <td *ngIf="canDelete && canEditRecord"> 
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a> 
    </td> 
</tr> 


<tr *ngFor="let row of rows"> 
    <td *ngFor="let day of row">{{day.dayNumber}}</td> 
</tr> 

は、それから私はAngular2は私が同じ文で*ngForと*ngIfを使用せません

<template> 
    <tr *ngFor="let row of rows"> 
    <td *ngIf="canEditRecord"> 
     <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a> 
    </td> 
    <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td> 
    <td *ngIf="canDelete && canEditRecord"> 
     <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a> 
    </td> 
    </tr> 
</template> 


<template> 
    <tr *ngFor="let row of rows"> 
    <td *ngFor="let day of row">{{day.dayNumber}}</td> 
    </tr> 
</template> 

Then I tried 


<tr *ngif="!isCalendar" *ngFor="let row of rows"> 
    <td *ngIf="canEditRecord"> 
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a> 
    </td> 
    <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td> 
    <td *ngIf="canDelete && canEditRecord"> 
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a> 
    </td> 
</tr> 


<tr *ngif="isCalendar" *ngFor="let row of rows"> 
    <td *ngFor="let day of row">{{day.dayNumber}}</td> 
</tr> 

を試してみました。それで、私は同じようなことをすると思った。*ngIf[ngSwitch]*ngIFの*ngCaseと同じ理由でこれが好きではなかった。誰かが私にこれを行う最善の方法を教えてもらえますか？私は後でこのテンプレートを作成することになるので、後で同じソリューションを再利用できるはずだと思います。

Answer 1

1つの要素に対して2つの構造テンプレート（*）ステートメントを使用することはできません。冗長な要素を避けるために、あなたが望む結果を得るためにng-containerコンポーネントを使用することができます：あなたは本当にTemplate guideを見ている必要があり

<ng-container *ngIf="!isCalendar"> 
    <tr *ngFor="let row of rows"> 
     <td *ngIf="canEditRecord"><a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a></td> 
     <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td> 
     <td *ngIf="canDelete && canEditRecord"><a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a></td> 
    </tr> 
</ng-container> 

Answer 2

。具体的にはtemplate tagに関するセクション。

と言われています。 *構文は実際にはテンプレートの使い方のためのショートカットです。 *ngIfと*ngForの両方に使用するディレクティブを調べる必要があります。ディレクティブは、設定する必要があるプロパティがそれぞれ少し異なるためです。あなたが余分なDOM要素を追加せずに合うよう良いことは、あなたがネストでき、これらのテンプレートコンポーネント、です:)

最も簡単には* ngIf（*ngIf="!isCalendar"）である：また、行うことができます

<template [ngIf]="!isCalendar"> 

* ngFor（*ngFor="let row of rows"）

<template ngFor let-row [ngForOf]="rows"> 

移動ナットと巣通常のHTML要素、あるいは角度成分:)

周りこれら