angular - 如何将 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>

此模板存在解析错误“No provider for 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'">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 .