基于某个值的角度选择可见元素[关闭]

Question

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

版本

如果我忘记了什么，请告诉我，我会补充的。

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>

带有字段的小部件类：

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

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

我的期望

然后type 值等于light 选择第一种情况，这将显示light 的小部件。当type 等于其他任何值时，在磁贴中显示type 变量

我得到了什么

注意事项

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

更新

1. 我认为我在ngSwitchWhen 之前添加了一个星号，它修复了模板错误。但我仍然选择了错误的选项。
2. 我发现，这两个元素都呈现在彼此之上。
3. 添加了角度版本
4. 添加解决方案
5. 将解决方案移至 stackblitz

解决方案

@Poul Kruijt 在this 答案中提供的解决方案为我做了。我使用了错误的指令并且没有在值中使用引号。一个简化的stackbliz版本可以找到here

Answer 1

首先，它被称为ngSwitchCase。其次，你应该在你的*ngSwitchCase赋值周围加上引号，否则它会寻找一个名为light的组件变量：

*ngSwitchCase="'light'"