[英]ngSwitchCase no provider
我正在看教程并试图做我学到的东西。我在下面遇到错误。我不明白为什么我在浏览器控制台上有这个错误消息。它说[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>
"):
应用程序组件.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;
}
}
您应该像这样将其包裹在td标签内,因为ngSwitch指令是td元素的作用域,而不是td元素之外
<td [ngSwitch]="item.action">
<span *ngSwitchCase="true">
Yes
</span>
<span *ngSwitchCase="false">
No
</span>
</td>
如果您只需要在两种选择之一之间做出选择,则也可以使用* ngIf-else: https ://ultimatecourses.com/blog/angular-ngif-else-then
您应该首先在父元素上应用 [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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.