如何在 NgRx Store 中更改 mat-select 的模型答案

【问题标题】：How to change the model of a mat-select in NgRx Store如何在 NgRx Store 中更改 mat-select 的模型
【发布时间】：2020-01-16 13:31:04
【问题描述】：

这是我的模板：

<mat-select [ngModel]="selected3">
    <mat-option (onSelectionChange)="handleChange($event,srs.id)" *ngFor="let srs of schemas" [value]="srs.id">
        {{srs.name}}
    </mat-option>
</mat-select>

在 handleChange() 中，变量 selected3 的状态在 NgRx 存储中更新，但在我的选项中，它没有在 mat-select 下拉列表中选择。如果我删除此(onSelectionChange) 事件，即不通过handleChange 调度存储操作，则选项选择有效。我不知道这里出了什么问题。

【问题讨论】：

你使用 Observables 访问 NgRx 存储吗？
@SanthoshV 我试过 [(ngModel)] 但没有工作
在<mat-select> 标签内使用(selectionChange) 事件而不是(onSelectionChange)。
@SparkFountain 是的，我正在使用 Observables，但问题是，当 mat-select 尝试更改模型值时，Store 不允许这样做，因为它是 UI 的只读值跨度>

标签： angular-material ngrx ngrx-store

【解决方案1】：

<mat-select (selectionChange)="handleChange($event.value)" [ngModel]="selected3">
    <mat-option  *ngFor="let srs of schemas" [value]="srs.id">
      {{srs.name}}
    </mat-option>
 </mat-select>

在<mat-select> 标签内使用(selectionChange) 事件而不是(onSelectionChange)；

【讨论】：

【解决方案2】：

我通过将 [(ngModel)] 替换为 [value] 解决了这个问题，因为我们有一个 mat-select 的只读值，它将在 NgRx 存储中进行修改。

<mat-select (selectionChange)="handleChange($event)"
                    [value]="selected3?.id">
                    <mat-option *ngFor="let srs of schemas" [value]="srs.id">
                        {{srs.name}}
                    </mat-option>
                </mat-select>

handleChange() 中我需要的是当前选择的 srs 的 id，我通过 $event.value 得到

【讨论】：