mat-select-search 不加载初始列表

Question

我正在用这个 example 做 mat-select-search。我正在使用带有动态数据的反应形式。我来自服务器的响应只是项目数组。我有动态数据车辆，当我输入搜索时它有效但初始列表不显示。如何让我的动态数据第一次显示？

.ts

 vehicles = [];
  public filteredOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
  protected _onDestroy = new Subject<void>();
  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter<any>();

public modelFilterCtrl: FormControl = new FormControl();

   @ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
  ngOnInit(): void {
    this.campaignService.getVehicles().subscribe((data: any[])=>{
      this.vehicles = data;
    })

    this.modelFilterCtrl.valueChanges
    .pipe(takeUntil(this._onDestroy))
    .subscribe(() => {
      this.filterEntities();
    });

}

set data(data: any[]) {
    this._data = data;
    // load the initial list
    this.filteredOptions.next(this.data.slice());
  }
  get data(): any[] {
    return this._data;
  }
  private _data: any[];

  ngAfterViewInit(): void {
    this.setInitialValue();
  }

  onChange($event) {
    this.onSelectionChange.emit($event);
  }

  private setInitialValue() {
    this.filteredOptions
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
        if(this.multiSelect)
          this.multiSelect.compareWith = (a: any, b: any) => a === b;
      });
  }

.html

 <mat-select multiple formControlName="Brand" (selectionChange)="onChange($event)" #multiSelect>
      <mat-option>
        <ngx-mat-select-search
        [formControl]="modelFilterCtrl"
        [placeholderLabel]="'Search...'">
      </ngx-mat-select-search>
      </mat-option>
      <mat-option *ngFor="let item of filteredOptions | async" [value]="item">{{item}}</mat-option>
    </mat-select>

Answer 1

当你得到初始车辆列表时，你应该初始化 filteredOptions :

ngOnInit(): void {
    this.campaignService.getVehicles().subscribe((data: any[])=>{
      this.vehicles = data;
      this.filteredOptions.next(this.vehicles);
    })

mat-select-search 不加载初始列表

mat-select-search doesn't load initial list

angular

typescript

angular-material

angular9