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

Question

我看了一些类似的问题，但它们没有正确回答我的问题。这是模板中的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>

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

Answer 1

您可以从组件内部订阅动态加载的数据，而不必使用 async 管道，并且可以在订阅块中将接收到的数组的第一个元素设置为 selectedDataSource < / em>对象，如下所示。

模板

<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];
});

Answer 2

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

Answer 3

使用ngModel代替值

<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>

Answer 4

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