Question

我正在观看教程，正在尝试做我学到的事情。下面出现错误。我不明白为什么我在浏览器控制台上看到此错误消息。它显示[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),
  ]
}

Model.ts

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

Answer 1

您应该像这样将其包裹在td标签内，因为ngSwitch指令是td元素的作用域，而不是td元素之外

<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

您应该首先在父元素上应用 [ngSwitch] 以充当开关案例的容器，并“提供”您正在检查/比较的条件，以在子元素中应用/显示您的任何开关案例满足任何类型（属性/字段/方法/函数）父级条件的元素。

所以父元素作为“提供者”

错误：在 NodeInjector 中找不到 NgSwitch 的提供程序。

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

有提供者且没有错误：

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

ngSwitchCase没有提供者

3 个答案: