NgSwitchCase нет провайдера

Я смотрел учебник и пытался сделать то, что я узнал. Я получил сообщение об ошибке ниже. Я не мог понять, почему у меня есть это сообщение об ошибке в консоли браузера. Он говорит [ERROR ->]<span *ngSwitchCase = "true">, но я не знаю, почему он говорит, что ngSwitchCase неверен. .Проверил все файлы и код, но проблем вроде нет. Где моя ошибка?

ОШИБКА

Uncaught Error: Template parse errors:
No provider for NgSwitch ("       <td>{{item.description}}</td>
              <td [ngSwitch] = "item.action"></td>
              [ERROR ->]<span *ngSwitchCase = "true">
                  Yes
              </span>
"): ng:///AppModule/AppComponent.html@25:14
No provider for NgSwitch ("
                  Yes
              </span>
              [ERROR ->]<span *ngSwitchCase = "false">
                  No
                </span>
"):

app.component.html

  <table class = "table table-striped table-bordered">
                <thead>
                   <tr>
                     <th></th>
                     <th>Description</th>
                     <th>Action</th>
                   </tr>
                </thead>
                <tbody>
                <tr *ngFor = "let item of items;let i=index">
                  <td>{{i+1}}</td>
                  <td>{{item.description}}</td>
                  <td [ngSwitch] = "item.action"></td>
                  <span *ngSwitchCase = "true">
                      Yes
                  </span>
                  <span *ngSwitchCase = "false">
                      No
                    </span>
                </tr>
                </tbody>
              </table>

app.comonent.ts

export class AppComponent {

  items:Model[]= [
    new Model('Breakfast',false),
    new Model('Sport',false),
    new Model('Studying',true),
    new Model('Cemo',false),
  ]
}

Модель.ts

export class Model
{
   description:string;
   action:Boolean;
   constructor(description:string,action:Boolean)
   {
       this.description=description;
       this.action=action;
   }
}