ngSwitchCase 没有提供者

Question

I was watching turtorial and was trying to do what I learned.I got an error below.I couldn't understand why I have this error message on the browser console.It says [ERROR ->]<span *ngSwitchCase="true"> but I don't know why it says ngSwitchCase is wrong.Checked all files and code but seems no problem.Where's my mistake?

ERROR

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;
   }
}

Answer 1

You should wrap you span inside td tag like this because ngSwitch directive is scope to td element not outside td element

<td [ngSwitch]="item.action">
    <span *ngSwitchCase="true">
              Yes
    </span>
    <span *ngSwitchCase="false">
            No
    </span>
  </td>

Answer 2

如果您只需要在两种选择之一之间做出选择，则也可以使用* ngIf-else： https ://ultimatecourses.com/blog/angular-ngif-else-then

Answer 3

you should apply [ngSwitch] on the parent element first to behave as a container to your switch cases and "provide" you with the condition you are checking/comparing to, to apply/display any of your switch cases in the child elements which met the condition of the parent of any type(property/field/method/function).

so the parent element work as a "Provider"

ERROR: No provider for NgSwitch found in NodeInjector.

<div>
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>

with provider & no errors:

<div [ngSwitch]="something">
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>