나는 이것이 매우 인기있는 오류라는 것을 알고 있으며 이미 많은 답변이 게시되었지만 솔루션이 작동하지 않는 것 같습니다. 이 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;
}
세상에 .. 단순한 실수 였어. app-list.module.ts의 선언에 AppListComponent를 포함하지 않았습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다