Ngx-mat-select-search 未设置默认值

Question

我正在使用具有 ngx-mat-select-search 的 select 组件，我想在调用该组件时设置默认值 selected ，但它没有显示，我在控制台上看不到任何错误。我不知道发生了什么，我错过了什么？

这里是 StackBlitz

https://stackblitz.com/edit/angular-hre1qd

这也是我用来设置默认值的主要代码：

test.component.html

<mat-form-field [formGroup]="formData" class="prueba">
    <mat-select formControlName="valueSelect"  #singleSelect>
        <mat-option>
            <ngx-mat-select-search [formControl]="inputFilter" [placeholderLabel]="'Search...'"
                 [noEntriesFoundLabel]="'Not Found...'">
                <i class="mdi mdi-close menu-icon" ngxMatSelectSearchClear></i>
            </ngx-mat-select-search>
        </mat-option>
        <mat-option value='-1' selected>{{defaultValue}}</mat-option>
        <mat-option *ngFor="let data of controlFilter | async" [value]="data[dataValue]">
            {{ data[dataShow] }}
        </mat-option>
    </mat-select>
</mat-form-field>

test.component.ts

setInitialValue() {
    this.controlFilter.next(this.dataSource.slice());
    this.formData
      .get("valueSelect")
      .setValue(this.dataSource[2]);
    // WHY IS NOT CHANGING TO A DEFAULT VALUE
  }

多谢指教！！

Answer 1

那是因为您只需要传递 code 而不是整个对象：

.setValue(this.dataSource[2].code);

Forked Stackblitz

Answer 2

您正在将整个对象分配给 'valueSelect'，以自动填充选项，您只需要在这里传递一个引用代码是唯一的，它可以被使用，默认值将被自动填充

试试这个

  setInitialValue() {
    this.controlFilter.next(this.dataSource.slice());
    this.formData
      .get("valueSelect")
      .setValue(this.dataSource[2].code); //here based on formControl value that having same code; that obj name field will be displayed/populated in selected option
  }

您可以使用 <mat-option value='-1' selected>{{defaultValue}}</mat-option> 到 display/select 空选项，如果不需要请删除此行代码。

Ngx-mat-select-search 未设置默认值

Ngx-mat-select-search not setting default value

angular-material

ngx-bootstrap

angular