Question

我知道这是一个非常普遍的错误，并且已经发布了很多答案，但是似乎没有一种解决方案有效。我有这个Angular模板。

<select class="form-control" [(ngModel)]="projectItem.DataType" >
  <option *ngFor="let item of getDataTypeList()" [ngValue]="item.Value">{{item.Name}}</option>
</select>

我收到此错误。

由于它不是'option'的已知属性，因此无法绑定到'ngForOf'。

我已经在app.module.ts中导入了BrowserModule。

app.module.ts
imports: [
  BrowserModule
]

我已经在子模块（该模板/组件的模块）中导入了CommonModule和FormsModule。

app-list.module.ts
@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    RouterModule.forChild([
      { path: '', component: AppListComponent }
    ]),
  ],
  exports: [
  ],
  declarations: [
  ],
  providers: [
  ]
})

因此，我尝试仅在子模块中导入FormsModule，但它不起作用，并且我尝试仅导入CommonModule，但不起作用。

最后，我尝试了没有CommonModule和FormsModule的情况，但仍然无法正常工作。

我觉得这很奇怪的原因是我在其模块中同时导入了CommonModule和FormModule的其他子模板/组件，并且代码完全相同，并且一切正常。

我仅从此特定的子模板/组件中收到此错误。

有什么我想念的吗？

编辑

这里是组件。

import { Component } from '@angular/core';
@Component({
  selector: 'app-app-list',
  templateUrl: './app-list.component.html',
})
export class AppListComponent {
  public projectItem: ProjectItem = new ProjectItem();
  getDataTypeList() {
    let nameValuePair: NameValuePair<string, DataType>[] = [];
    nameValuePair.push({ Name: "string", Value: DataType.String });
    nameValuePair.push({ Name: "Integer", Value: DataType.Int });
    return nameValuePair;
  }
}
export class ProjectItem {
  DataType: DataType;
}
export enum DataType { String = 1, Int = 2  }
export class NameValuePair<T1, T2> {
  Name: T1;
  Value: T2;
}

Answer 1

我的天哪...这是一个简单的错误。我没有在app-list.module.ts中的声明中包含AppListComponent。

Angular 10无法绑定到'ngForOf'，因为它不是'option'的已知属性

1 个答案: