Angular select 基于某些值的可见元素

Question

我从服务中获取项目列表作为（可观察的）数组。中的元素有一个 type: string; 字段，我打算将其用作要显示的 selecting 不同组件的指示符。当我还没有类型的小部件时，我想将该类型显示为字符串。

版本

当我忘记什么的时候，让我知道，我会添加它。

module	version
node	v14.2.0
Angular CLI	9.1.6
npm	6.14.4
@angular/core	~9.1.7

到目前为止我得到了什么

我正在使用的组件模板

<mat-grid-list cols="8" rowHeight="1:1" class="grid">
  <ng-container *ngFor="let widget of widgets |async">
    <mat-grid-tile class="grid-item">
      <div [ngSwitch]="widget.type">
        <app-light-toggle [widget]="widget" *ngSwitchWhen="light"></app-light-toggle>
        <div *ngSwitchDefault>
          {{widget.type}}
        </div>
      </div>
    </mat-grid-tile>
  </ng-container>
</mat-grid-list>

具有以下字段的小部件 class：

export class Widget {
  // other fields left out, because irrelevant.
  type: string;

  constructor(type :string) {
    this.type = type;
  }
}

我所期待的

然后 type 值等于 light select 第一种情况，这将显示 light 的小部件。当 type 等于任何其他值时，在 tile

中显示 type 变量

我得到了什么

备注

删除 ng-switch-default div 时，tiles 都显示 app-light-toggle。
我发现了几种不同的 switch 语法符号，但我不知道该使用哪一种
- NgSwitch 导致错误，我个人认为什么都没有 (ERROR Error: No provider for TemplateRef)
  - 这是否意味着，我可以在某处提供模板？
  - 如果是这样，我在哪里做这个？我似乎无法在文档中找到任何重新分级模板商店或任何内容
- ng_ng-switch 似乎确实做了一些事情，但没有像我预期的那样表现（见上面的解释）

更新

我在 ngSwitchWhen 之前添加了一个星号，我认为它修复了模板错误。但我仍然得到错误的选项 selected.
我发现，这两个元素在彼此之上呈现。
添加了 angular 版本
已添加解决方案
将解决方案移至 stackblitz

解决方案

@Poul Kruijt 在 answer did it for me. I was using the wrong directive and did not use quotes in the value. A simplified stackbliz version can be found here

中提供的解决方案

Answer 1

首先，它被称为ngSwitchCase。其次，您应该在 *ngSwitchCase 赋值周围加上引号，否则它将查找名为 light:

的组件变量

*ngSwitchCase="'light'"

Angular select 基于某些值的可见元素

Angular select visible element based on some value

angular

angular9

ng-switch

版本