Hinzufügen von verschiedenen Vorlagen in einer Tabelle mit Winkel 2

Question

Ich baue eine generische Tabelle Steuerelement, das ich gerne über viele verschiedene Formen verwenden könnte. Einige der verschiedenen Zeilen benötigen jedoch andere Vorlagen. Das Schablonen-Tag ist etwas, was ich einfach nicht verstehe.

Was ich versuche zu erreichen ist, wenn es kein Kalender ist, dann mach eine Sache, wenn es eine andere Sache macht.

Mein Versuch:

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

Dann habe ich versucht

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

Angular2 mich *ngFor und *ngIf in derselben Anweisung nicht verwenden lassen. Dann dachte ich, dass ich etwas ähnliches tun würde *ngIf mit [ngSwitch] es nicht aus dem gleichen Grund wie *ngIF auf *ngCase. Kann mir bitte jemand den besten Weg sagen, dies zu tun? Bitte beachten Sie, dass ich sicher bin, dass ich später beim Erstellen weitere Vorlagen verwenden werde. Daher denke ich, dass ich die gleiche Lösung später wiederverwenden könnte.

Answer 1

Es ist nicht zulässig, zwei strukturelle Vorlagen (*) Anweisungen auf einem Element zu verwenden. Zur Vermeidung von redundanten Elementen können Sie die ng-container Komponente verwenden zu bekommen, was Sie wollen:

<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

Sie wirklich einen Blick auf die Template guide haben sollte. Speziell der Abschnitt über die template tag.

Das sagte. Die * -Syntax ist eigentlich nur eine Abkürzung für die Verwendung der Vorlage. Sie müssen die Direktive, die Sie für *ngIf und *ngFor verwenden möchten, nachschlagen, da beide etwas unterschiedliche Eigenschaften haben, die Sie einstellen müssen. Die gute Sache ist, können Sie nisten diese Vorlage Komponenten, wie Sie ohne Zugabe von zusätzlichen dom Elemente sehen, passen :)

Die einfachste ist * ngIf (*ngIf="!isCalendar"):

<template [ngIf]="!isCalendar"> 

Sie auch tun können * ngFor (*ngFor="let row of rows")

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

Go Nüsse und Nest diese um Ihre normalen hTML-Elemente oder auch Winkelkomponenten :)