テンプレートでngSwitchを使用するには？

Question

私は、IF文を使用して、テンプレートを持っている：

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

ngSwitchディレクティブでこのテンプレートを作成する方法を？

たとえばこのテンプレートは、エラー「組み込みテンプレート上のコンポーネント」を解析しています

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

をそしてこのテンプレートは、エラー「NgSwitchなしプロバイダ」を解析しています

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

Answer 1

テンプレート

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

また、thaこのコンポーネントを所有するモジュールは、CommonModuleをインポートします。そうでない場合、ngSwitchは認識されません。

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

Answer 2

一つの可能​​性：

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

代替構文：

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

はofficial docsとlive demoを見てみましょう。