Question

其他信息已添加到2019DEC06底部

Angular 7

我有一个非常典型的用例：

获取后端可用的选项列表（wrapper.hydratedLeague.seasons）
获取所选选项的列表（wrapper.myseasons）
当前“角材料”多选对话框，默认情况下已预先选择了适当的选项

实施：

{{ logger.debug('wrapper.myseasons: ', wrapper.myseasons) }} // See log output below
{{ seasonsFormControl.setValue(wrapper.myseasons) }}         // (A) This will break <mat-option> appearance/behavior
{{ seasonsFormControl.setValue([2012526, 673768]) }}         // (B) This will not

<mat-select [formControl]="seasonsFormControl" (selectionChange)="omitted-not relevant" multiple>
    <mat-option *ngFor="let season of wrapper.hydratedLeague.seasons" [value]="season.key">
        {{season.value}}
    </mat-option>
</mat-select>

问题：

如果我根本不设置的值，那么<mat-select>控件将无法显示已经选择的选项（这是预期的）。但是，当我选择选项时，控件的行为就如预期的那样，包括<mat-option>的正确动画。例如复选框显示为选中状态，当我关闭/打开控件时，在此交互中选择的选项显示为选中状态
如果我使用wrapper.myseasons变量设置seasonsFormControl的值，则<mat-select>控件将显示正确的所选选项。但是，当我打开控件以显示<mat-option>元素时，没有显示为选中状态。另外，如果我选择选项，则标准动画不会发生，并且不会选中该复选框。
仅出于说明目的，如果我使用两个整数数组（即较早的wrapper.myseasons变量的确切内容）来设置seasonsFormControl的值，则所有内容的行为均与预期的一样。默认设置正确显示在<mat-select>中，并且<mat-option>元素显示为选中状态并正确呈现。

在两种情况下，selectionChange事件都能正确检测并处理选定的选项。

似乎设置FormControl值的行为破坏了（或至少改变了）mat-option元素的UX行为，这是一个问题，因为最终用户无法看到他们已经选择的内容

我是菜鸟犯错了吗？

编辑：2019DEC06

谢谢那些迄今已回答的人。您已敦促我细化此问题的根本原因，但我仍然不了解并且需要帮助。

我已经编辑了上面的示例，以更清楚地说明问题。

如您在上面编辑的代码片段中所看到的，我已经注销了wrapper.myseasons的内容。这就是我所看到的（从Chrome调试控制台复制/粘贴）：

wrapper.myseasons:  (2) [2012526, 673768]
0: 2012526
1: 673768
length: 2
__proto__: Array(0)

以下是wrapper对象的声明方式：

export interface ILeagueWrapper {
    league?: number;
    hydratedLeague?: League;
    myrefereekey?: number;
    myseasons?: [number];
}

export class LeagueWrapper {
    private state: ILeagueWrapper = {};
    private internalHydratedLeague: League = null;

    get hydratedLeague(): League {
        return this.internalHydratedLeague;
    }

    set hydratedLeague(value: League) {
        this.internalHydratedLeague = value;
    }

    get league() {
        return this.state.league;
    }

    get myrefereekey() {
        return this.state.myrefereekey;
    }

    get myseasons() {
        return this.state.myseasons;
    }

}

据我所知，在这个示例中，（A）wrapper.myseasons是两个整数的数组，与硬编码的（B）等效。

但是，（A）中断了<mat-option>，但是（B）正常工作。

似乎wrapper.myseasons不能以某种方式识别为整数数组，结果破坏了<mat-option>。

我确信这将导致我不了解有关TypeScript的某些知识。有人可以教育我吗？

谢谢

预设formControl值以mat-select多个更改（破坏）mat-option行为

0 个答案: