Question

我在.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>

这是ECH LIST的错误：

（承诺）：模板解析错误：无法绑定到'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>

这里有什么问题？我可以让它更有效率吗？

感谢

Answer 1

如果您使用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 {

}

Answer 2

从错误中可以清楚地看出，使用'ngSwitchCase'的方式是错误的。从错误的这一部分可以理解：

＆＃39; ngSwitchCase＆＃39;因为它不是一个已知的原生财产

因此，我建议您从正在检查的媒体资源中移除' '，并将其保留为" "。下面的代码应该可以解决您的问题：

<div [ngSwitch]="currentListView">
    <div *ngSwitchCase="People">
      <!-- Code Here -->
    </div>
    <div *ngSwitchCase="Cars">
      <!-- Code Here -->
    </div>
</div>

This link也可能会有所帮助。

Angular2 - 无法绑定到'ngSwitchCase'，因为它不是已知的本机属性

2 个答案: