如何在NgRx商店中更改mat-select的模型

export interface AppState {
  selectedOption: string;
}

import { createAction, props } from '@ngrx/store';

export const setSelectedOption = createAction(
  '[Mat-Select] Set Selected Option',
  props<{ option: string }>()
);

import { createReducer, on } from '@ngrx/store';
import * as fromActions from './actions';
import { AppState } from './state';

export const initialState: AppState = {
  selectedOption: ''
};

export const reducer = createReducer(
  initialState,
  on(fromActions.setSelectedOption, (state, { option }) => ({
    ...state,
    selectedOption: option
  }))
);

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { AppState } from './state';

export const selectFeature = createFeatureSelector<AppState>('matSelect');

export const selectSelectedOption = createSelector(
  selectFeature,
  (state: AppState) => state.selectedOption
);

<mat-form-field>
  <mat-label>Options</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { setSelectedOption } from './ngrx/actions';
import { selectSelectedOption } from './ngrx/selectors';

@Component({
  selector: 'app-my-component',
  template: `...` // 上面的HTML模板
})
export class MyComponent {
  selectedOption: string;
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];

  constructor(private store: Store) {
    this.store.select(selectSelectedOption).subscribe(option => {
      this.selectedOption = option;
    });
  }

  onChange(option: string) {
    this.store.dispatch(setSelectedOption({ option }));
  }
}