typescript Angular2 - 无法绑定到“ngSwitchCase”，因为它不是已知的本机属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38677753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 - Can't bind to 'ngSwitchCase' since it isn't a known native property
提问by Joe
I have two lists that I'm presenting in my .htmlfile. I'm trying to make my code not repetitive so I decided to use ngSwitch, but I get an error while I do the next thing:
我在我的.html文件中有两个列表。我试图让我的代码不重复，所以我决定使用ngSwitch，但是在我做下一件事时出现错误：
<div [ngSwitch]="currentListView">
<div *ngSwitchCase="'People'">
<div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfPeople">
<div class="list-bg" *ngFor="#person of listOfPeople; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{bulk.person}} <p></p> Name: {{person.name}}
</div>
</div>
</div>
<div *ngSwitchCase="'Cars'">
<div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfCars">
<div class="list-bg" *ngFor="#car of listOfCars; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{car.id}} <p></p> Color: {{car.color}}
</div>
</div>
</div>
THIS IS THE ERROR IM GETTING FOR ECH LIST:
这是我获取 ECH 列表的错误：
(in promise): Template parse errors: Can't bind to 'ngSwitchCase' since it isn't a known native property ("
<div [ngSwitch]="currentListView"> <div [ERROR ->]*ngSwitchCase="'People'"> <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData"): AppCmp@42:9 Property binding ngSwitchCase not used by any directive on an embedded template (" <div [ngSwitch]="currentListView"> [ERROR ->]<div *ngSwitchCase="'People'"> <div dnd-sortable-container [dropZones]="['zone-one']" [sortabl"): AppCmp@42:4 Can't bind to 'ngSwitchCase' since it isn't a known native property (" </div> </div>
（承诺）：模板解析错误：无法绑定到“ngSwitchCase”，因为它不是已知的本机属性（“
<div [ngSwitch]="currentListView"> <div [ERROR ->]*ngSwitchCase="'People'"> <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData"): AppCmp@42:9 Property binding ngSwitchCase not used by any directive on an embedded template (" <div [ngSwitch]="currentListView"> [ERROR ->]<div *ngSwitchCase="'People'"> <div dnd-sortable-container [dropZones]="['zone-one']" [sortabl"): AppCmp@42:4 Can't bind to 'ngSwitchCase' since it isn't a known native property (" </div> </div>
what is wrong here? and can I make it even more efficient?
这里有什么问题？我可以让它更有效率吗？
thanks
谢谢
回答by caballerog
If you use commons elements (ngSwitch, ngIf, ngFor, ...) of Angular2 you must import CommonModulein your app.
如果您使用 Angular2 的公共元素（ngSwitch、ngIf、ngFor、...），则必须CommonModule在您的应用程序中导入。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule
],
providers: [],
entryComponents: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
回答by etrupja
From the error it is clear that the way you are using 'ngSwitchCase'is wrong.
This can be understand from this part of error:
从错误中可以明显看出您使用的方式 'ngSwitchCase'是错误的。从这部分错误可以理解：
'ngSwitchCase' since it isn't a known native property
'ngSwitchCase' 因为它不是已知的本机属性
So, i would suggest that you remove the ' 'from the property you are checking and you leave it only with " ".
Below code should fix your issue:
所以，我建议你' '从你正在检查的财产中删除，只留下" ". 下面的代码应该可以解决您的问题：
<div [ngSwitch]="currentListView">
<div *ngSwitchCase="People">
<!-- Code Here -->
</div>
<div *ngSwitchCase="Cars">
<!-- Code Here -->
</div>
</div>
This linkcould be helpful, too.
此链接也可能有所帮助。
