Angular 10 - 无法绑定到“ngModel”，因为它不是“select”的已知属性

Question

我今天试图在 angular 10 上开始一个新项目，但是每当尝试在任何东西中使用 ngModel 时我都会遇到这个问题，我知道这个问题已经在 stackoverflow 上被问过并解决了好几次，但我已经导入了 FormsModule 和甚至是 ReactivFormsModule，但错误不断发生

html

<div class="background">
    <h4>Character Selector</h4>
    <label>Character</label>
    <select [(ngModel)]="selectedChar" name="char-selector">
    <option *ngFor="let char of characterList" [value]="char.value">
      {{char.label}}
    </option>
  </select>
    <p> Selected Character: {{selectedChar}} </p>
</div>

模块.ts

@NgModule({
  declarations: [],
  imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

StackBlitz 示例

编辑：声明 AppComponent 解决了问题

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
   providers: [],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Answer 1

试试这个：这里我正在使用ngModel指令<p> <select>元素和<p>元素进行双向绑定。

<select [(ngModel)]="selectedChar">
    <option value="">-- Select a Value --</option>
    <option *ngFor="let char of characterList" [(ngValue)]="char.value">{{char.label}}</option>
</select>

<p>Selected Character: {{selectedChar}}</p>