Question

我正在制作一个Angular2应用程序，并从服务器检索一组设备。并非每个设备都具有“品牌”或“类型”属性。我想显示它们中的任何一个，但如果它们都错过了我想要显示'Device＃'。我尝试使用ngSwitch，但似乎无法使其正常工作......

<div *ngFor="let device of devices; let i=index">
  <div [ngSwitch]="device">
    <a *ngSwitchCase="device.brand">{{device.brand}}</a>
    <a *ngSwitchCase="device.type">{{device.type}}</a>
    <a *ngSwitchDefault>Device {{i+1}}</a>
  </div>
</div>

Answer 1

ngSwitch采用实际值：

<div [ngSwitch]="gender">
  <div *ngSwitchCase="'male'">...</div>
  <div *ngSwitchCase="'female'">...</div>
</div>

您尝试将其用作ngIf。

解决问题的代码是：

<div *ngFor="let device of devices; let i=index">
  <div [ngSwitch]="device">
    <a *ngIf="device.brand && !device.type">{{device.brand}}</a>
    <a *ngSwitchCase="device.type && !device.brand">{{device.type}}</a>
    <a *ngIf="!device.type && !device.name">Device {{i+1}}</a>
  </div>
</div>

Answer 2

我找到了其他解决方案。在ngSwitch的实现中，我们在ngSwitch参数和ngSwitchCase参数之间有===。我们可以使用它：

<div [ngSwitch]="true">
    <a *ngSwitchCase="!!device.brand">{{device.brand}}</a>
    <a *ngSwitchCase="!!device.type">{{device.type}}</a>
    <a *ngSwitchDefault>Device {{i+1}}</a>
</div>

在引擎盖下，我们得到以下条件：

true === !!device.brand

双重感叹号，首先将属性device.brand转换为布尔值，然后将其反转。例如：

const brand = 'New';
console.log(!brand); // false
console.log(!!brand); // true (exists)

let brand; // undefined
console.log(!brand); // true
console.log(!!brand); // false (not exists)

最诚挚的问候！

在Angular2中使用带有条件属性的对象的ngSwitch

2 个答案: