Question

我刚开始使用angular，并且我正在使用开关盒探索Angular中的条件。

因此，我有一个提供对象列表的服务。每个对象都有一个名称和一个类型三种可能的类型是char，book和house。

我已经通过console.log验证了数据有效

现在在我的主模板中，我正在使用像这样的开关盒

<div>
  <div *ngFor="let item of dataSet" [ngSwitch]="item.type">
    <app-char-item *ngSwitchCase="char" [charItem]="item"></app-char-item>
    <app-house-item *ngSwitchCase="house" [houseItem]="item"></app-house-item>
    <app-book-item *ngSwitchCase="book" [bookItem]="item"></app-book-item>
    <div *ngSwitchDefault>{{item.type}}</div>
  </div>
</div>

dataSet是一个包含所有对象的数组。

目前，每个组件仅显示传入对象的名称属性。

我正在使用@Input()来接收各个组件中的数据。

但是由于某些原因，页面上没有显示数据。控制台是干净，没有任何错误。

我尝试使用默认大小写并打印出type属性。默认大小写已执行，但是type属性的拼写与切换大小写相同，因此应该没有理由执行默认块。

注意：dataSet的类型为Any[]。因此它基本上可以容纳不同类型的对象。

Answer 1

默认情况下，角度开关会询问要计算的表达式。

这意味着正确的语法是表达式。例如：

*ngSwitchCase="1 === 1"

您可以使用隐式表达式，但是如果这样做，请考虑使用“表达式必需”的语法。因此，请尝试这样做（您可以删除空格，我用它来显示引号）：

*ngSwitchCase=" 'char' "

这通过其“糖化”语法来解释：*ngSwitchCase。

编写此代码时，Angular会将其转换为：

<ng-template [ngSwitchCase]="'char'">
  <app-char-item [charItem]="item"></app-char-item>
</ng-template>

因为它使用输入语法[ngSwitchCase]，所以您必须像使用@Input一样提供JS代码而不是字符串

Answer 2

如果要控制变量item.type的值是否等于'char'（以字符串等表示），则应该执行以下操作：

<div>
  <div *ngFor="let item of dataSet" [ngSwitch]="item.type">
    <app-char-item *ngSwitchCase="'char'" [charItem]="item"></app-char-item>
    <app-house-item *ngSwitchCase="'house'" [houseItem]="item"></app-house-item>
    <app-book-item *ngSwitchCase="'book'" [bookItem]="item"></app-book-item>
    <div *ngSwitchDefault>{{item.type}}</div>
  </div>
</div>

否则，您尝试将item.type的值与一个名为char的变量的值进行匹配（我猜对于您的情况是未定义的，因为它可能未在代码中的任何地方定义）

数据未通过开关盒Angular显示

2 个答案: