Wie benutzt man ngSwitch mit Vorlage?

Question

Ich habe Vorlage mit IF-Anweisung:

<li *ngIf="activity.entity_name == 'Project'" [activity-project-item]="activity"></li> 
<li *ngIf="activity.entity_name == 'Tooling'" [activity-tooling-item]="activity"></li> 
<li *ngIf="activity.entity_name != 'Project' && activity.entity_name != 'Tooling'" [activity-item]="activity"></li> 

Wie diese Vorlage schreiben mit ngSwitch Richtlinie?

Zum Beispiel hat diese Vorlage Fehler "Komponenten auf einem Embedded-Vorlage" analysieren:

<li [ngSwitch]="activity.entity_name"> 
    <template [ngSwitchCase]="'Project'" [activity-project-item]="activity"></template> 
</li> 

Und diese Vorlage hat Fehler "Kein Anbieter für NgSwitch" analysieren:

<template [ngSwitch]="activity.entity_name"> 
    <li [ngSwitchCase]="'Project'" [activity-project-item]="activity"></li> 
</template> 

Answer 1

Vorlage

<li [ngSwitch]="activity.entity_name"> 
    <template [ngSwitchCase]="'Project'">Content here</template> 
    <template [ngSwitchCase]="'Project2'">Other content here</template> 
    <template ngSwitchDefault>Content if nothing matched</template> 
</li> 

Auch sicherstellen, dass tha t Das Modul, das diese Komponente besitzt, importiert CommonModule. Andernfalls wird ngSwitch nicht erkannt.

@NgModule({ 
    ... 
    imports: [CommonModule...], 
    declarations: [ThisComponent...], 
    ... 
}) 
export default class MyModule {} 

Answer 2

Eine Möglichkeit:

<li [ngSwitch]="activity.entity_name"> 
    <template [ngSwitchCase]="'Project'">Selected Project</template> 
    <template [ngSwitchCase]="'Tooling'">Selected Tooling</template> 
    <template ngSwitchDefault>Or else...</template> 
</li> 

Alternative Syntax:

<div [ngSwitch]="activity.entity_name"> 
    <li *ngSwitchCase="'Project'">Selected Project</li> 
    <li *ngSwitchCase="'Tooling'">Selected Tooling</li> 
    <li *ngSwitchDefault>Or else...</li> 
</div> 

Werfen Sie einen Blick auf die official docs und live demo.