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>