html - ngFor angular 2+ 内部的 ngSwitch

Question

我正在将旧的 Angular 1 应用程序移动到 Angular 2+，并且需要在数组 A 的元素 = 已知值时显示数组 B 的元素。

<!-- format and display level and school -->
<div [ngSwitch]="spell.level">
  <small class="text-muted" *ngSwitchCase="0">{{spell.school}} cantrip</small>
  <small class="text-muted" *ngSwitchCase="1">{{spell.level}}st level {{spell.school}} spell</small>
  <small class="text-muted" *ngSwitchCase="2">{{spell.level}}nd level {{spell.school}} spell</small>
  <small class="text-muted" *ngSwitchDefault>{{spell.level}}th level {{spell.school}} spell</small>
</div>

上面的代码工作正常，但是下面的代码总是命中默认路径。

<!-- loop over classes and display them with the appropriate subclass requirements if needed -->
<div *ngFor="let class of spell.classes">
  <div [ngSwitch]="class">
    <small *ngSwitchCase="Cleric"> {{class}}  <small *ngFor="let domain of spell.domains">{{domain}}, </small></small>
    <small *ngSwitchCase="Druid"> {{class}}   <small *ngFor="let circle of spell.circles">{{circle}}, </small></small>
    <small *ngSwitchCase="Paladin"> {{class}} <small *ngFor="let oath of spell.oaths">{{oath}}, </small></small>
    <small *ngSwitchCase="Warlock"> {{class}} <small *ngFor="let patron of spell.patrons">{{patron}}, </small></small>
    <small *ngSwitchDefault>{{class}}</small>
  </div>
</div>

在这种情况下我做错了什么？

示例对象

    {
    "name": "Bane",
    "description": "Up to three creatures of your choice that you can see within range must make Charisma saving throws. Whenever a target that fails this saving throw makes an attack roll or a saving throw before the spell ends, the target must roll a d4 and subtract the number rolled from the attack roll or saving throw.",
    "higherLevel": "When you cast this spell using a spell slot of 2nd level or higher, you can target one additional creature for each slot level above 1st.",
    "emote": "afflicts his targets with Bane",
    "source": "phb 216",
    "range": "30 ft",
    "target": "up to 3 creatures of your choice within range",
    "components": {
      "verbal": true,
      "somatic": true,
      "material": true,
      "materialMaterial": "A drop of blood"
    },
    "duration": "up to 1 minute",
    "concentration": true,
    "castingTime": "1 action",
    "level": 1,
    "school": "Enchantment",
    "save": {
      "ability": "Charisma",
      "saveFailure": "Whenever a target makes an attack roll or a saving throw before the spell ends, the target must roll a d4 and subtract the number rolled from the attack roll or saving throw."
    },
    "classes": [
      "Bard",
      "Cleric",
      "Paladin"
    ],
    "oaths": [
      "Vengeance"
    ]
  }

先谢谢你

Answer 1

<div *ngFor="let class of spell.classes">
  <div [ngSwitch]="class">
    <small *ngSwitchCase="'Cleric'"> {{class}}  <small *ngFor="let domain of spell.domains">{{domain}}, </small></small>
    <small *ngSwitchCase="'Druid'"> {{class}}   <small *ngFor="let circle of spell.circles">{{circle}}, </small></small>
    <small *ngSwitchCase="'Paladin'"> {{class}} <small *ngFor="let oath of spell.oaths">{{oath}}, </small></small>
    <small *ngSwitchCase="'Warlock'"> {{class}} <small *ngFor="let patron of spell.patrons">{{patron}}, </small></small>
    <small *ngSwitchDefault>{{class}}</small>
  </div>
</div>