ngx-select-dropdown -- 如何设置下拉菜单的默认值？（角度 6.x）答案

【问题标题】：ngx-select-dropdown -- how to set default value for the dropdown? (angular 6.x)ngx-select-dropdown -- 如何设置下拉菜单的默认值？（角度 6.x）
【发布时间】：2021-06-09 14:43:43
【问题描述】：

我查看了一些类似的问题，但他们没有正确回答我的问题。这是我在模板中的 ngx-select-dropdown 代码。

<ngx-select-dropdown [config]="{displayKey: 'name', search: true, placeholder: 'pick one'}"
                   [(value)]="selectedDatasource"
                   [options]="layoutSandbox.datasource$ | async"
                   [multiple]="false" (change)="onChangeDatasource($event)"> 
</ngx-select-dropdown>

由于对象数组是动态的，我需要选择数组的“第一个”值作为默认选项，因此，页面上的其余数据将发生变化。有任何想法吗？提前致谢！

【问题讨论】：

标签： angular angular6

【解决方案1】：

除了使用 async 管道，您可以从组件内订阅动态加载的数据，在订阅块中，您可以将接收到的数组的第一个元素设置为 selectedDataSource 对象，如下所示。

模板

<ngx-select-dropdown [config]="{displayKey: 'name', search: true, placeholder: 'pick one'}"
       [(value)]="selectedDatasource"
       [options]="layoutSandbox.datasource"
       [multiple]="false" (change)="onChangeDatasource($event)"> 
</ngx-select-dropdown>

组件

this.layoutSanbox.dataSource$.subscribe((data) => {
      this.layoutSandbox.dataSource = data;
      this.selectedDataSource = this.layoutSandbox.dataSource[0];
});

【讨论】：

谢谢。工作，除了 selectedDatasource 没有更新 :( 这是主要目标！
试试this.selectedDataSource = [this.layoutSandbox.dataSource[0]]; 因为 ngx-select-dropdown 需要一个数组作为 value 属性。见github-singleSelect
与 [(value)] 绑定对我不起作用，我使用 [(ngModel)] 代替

【解决方案2】：

使用 ngModel 代替 value

<ngx-select-dropdown [config]="{displayKey: 'name', search: true, placeholder: 'pick one'}"
                   [(ngModel)]="selectedDatasource"
                   [options]="layoutSandbox.datasource$ | async"
                   [multiple]="false" (change)="onChangeDatasource($event)"> 
</ngx-select-dropdown>

【讨论】：

【解决方案3】：

您可以尝试将数组的第一个元素设置为 selectedDatasource，并在组件中使用 change output 在所选值发生更改时触发并采取相应措施。

【讨论】：

谢谢卡洛斯。这是我正在尝试的，但不知何故， selectedDatasource 没有得到更新。
如果是数组试试这个 selectedDatasource = [...selectedDatasource]

【解决方案4】：

确保在模块导入下导入 FormsModule。那就是如果它是模板形式，这似乎是上面的情况

【讨论】：