While following a tutorial and trying to implement what I learned, I encountered an error that I'm having trouble understanding. The browser console shows an error message stating
[ERROR ->]<span *ngSwitchCase="true">Error Message:
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),
]
}
Model.ts
export class Model {
description:string;
action:Boolean;
constructor(description:string, action:Boolean) {
this.description = description;
this.action = action;
}
}