Angular 10 не может привязываться к 'NgForOf', поскольку это неизвестное свойство 'option'

#angular

Вопрос:

Я знаю, что это очень популярная ошибка, и уже опубликовано много ответов, но ни одно из решений, похоже, не работает. У меня есть этот шаблон Angular.

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

И я получаю эту ошибку.

Не могу привязаться к ‘NgForOf’, так как это неизвестное свойство ‘option’.

У меня уже есть BrowserModule, импортированный в app.module.ts.

 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;
}

1. Что getDataTypeList() возвращает? Убедитесь, что в вашем html-шаблоне нет ошибок синтаксиса / типа. Вы можете использовать VS Code с языковой службой angular, чтобы помочь определить их.

2. Он возвращает массив класса, который имеет только два свойства: Name и Value. Я уже пытался вернуть пустой массив, но по-прежнему безуспешно.. И если есть ошибка синтаксиса / типа, то я думаю, что получаю некоторые другие ошибки. И, как я уже сказал, я скопировал этот код из другого рабочего компонента / шаблона. Поэтому я думаю, что здесь нет ошибки синтаксиса / типа.

3. Синтаксис кажется нормальным, я могу запустить его с помощью stackblitz: stackblitz.com/edit/angular-ivy-c4fe9q?file=src/app /…

4. Попробуйте импортировать CommonModule и FormsModule в app.module.ts вместо дочернего компонента шаблона. @jongshin

5. ОК. Я просто попытался добавить оба модуля в app.module.ts, но я все еще получаю ту же ошибку..

Ответ №1:

О боже god…it была простая ошибка. Я не включил AppListComponent в объявления в app-list.module.ts.