ngSwitch inside of ngFor angular 2+

I am moving an old angular 1 application to angular 2+ and need to display elements of array B when elements of array A = a known value.

<!-- 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>

The above code works fine however, the below code always hits the Default path.

<!-- 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>

What am I doing wrong in this situation?

example object

    {
    "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"
    ]
  }

Thank you in advanced

If the value is not a property and you want to check a value directly, you should quote the value as string value:

 <small *ngSwitchCase="'Cleric'"> 

with ' after/before "