ngx-mat-select-search не работает

Question

Я хотел реализовать ngx-mat-select-search в форме, которую я использую, но, к сожалению, она не работает (я не могу открыть раскрывающийся список - он не показывает мне никакого значения).

Мой HTML:

<div class="form">
  <mat-form-field>
    <mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
      (ngModelChange)="dofilterCustomer()">
      <ngx-mat-select-search></ngx-mat-select-search>
      <mat-option *ngFor="let customer of customers | async" [value]="customer">
        {{customer}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Мой .ts файл:

import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogModule,
  MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";

@Component({
  selector: "app-add-dialog",
  templateUrl: "./add-dialog.component.html",
  styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<AddDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: EntryDTO,
    public dataService: TableService
  ) {}

  customers!: Observable<string[]>;
  currentCustomer = "";
  forwarders!: Observable<string[]>;
  currentForwarder = "";
  bins!: Observable<string[]>;
  currentBin = "";

  @ViewChild("singleSelect") singleSelect!: MatSelect;

  ngOnInit() {}

  dofilterCustomer() {
    this.customers = this.dataService
      .getAllCustomers()
      .pipe(map(customers => this.filter(customers, this.currentCustomer)));
  }

  dofilterForwarder() {
    this.forwarders = this.dataService
      .getAllForwarders()
      .pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
  }

  dofilterBins() {
    this.bins = this.dataService
      .getAllBins()
      .pipe(map(bins => this.filter(bins, this.currentBin)));
  }

  formControl = new FormControl("", [
    Validators.required
    // Validators.email,
  ]);

  getErrorMessage() {
    return this.formControl.hasError("required")
      ? "Required field"
      : this.formControl.hasError("email")
      ? "Not a valid email"
      : "";
  }

  submit() {
    this.dataService.addEntry(this.data);
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  public confirmAdd(): void {
    this.dataService.addEntry(this.data);
  }

  filter(values: string[], current: string) {
    return values.filter(value => value.toLowerCase().includes(current));
  }
}

Первоначально у меня был следующий код в моем HTML. Тогда это сработало, но у меня не было выпадающего списка, только «автозаполнение»:

<div class="form">
  <mat-form-field class="example-full-width accent">
    <input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
      [(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
    <mat-autocomplete #auto1="matAutocomplete">
      <mat-option *ngFor="let customer of customers | async" [value]="customer">
        {{customer}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

Может кто-нибудь мог понять, что я делаю не так?

Заранее спасибо.

Answer 1

Я предпочитаю избегать воспроизведения объектов (или объектов в целом) в моем коде, поэтому используйте следующее:

  this.options$ = this.searchControl.valueChanges.pipe(
       startWith(''),
       map(searchValue => this.getFilteredOptions(allOptions, searchValue))

Answer 2

Вам нужно инициализировать this.customers.Я предлагаю изначально установить наблюдаемое в качестве субъекта воспроизведения и изначально загружать клиентов следующим образом:

customers: ReplaySubject<string[]> = new ReplaySubject<string[]>(1);

ngOnInit() {
  this.dataService
  .getAllCustomers()
  .subscribe(customers => this.customers.next(customers));
}

и

dofilterCustomer() {
  this.dataService
    .getAllCustomers()
    .subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}

См. Также пример реализации https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example иhttps://github.com/bithost-gmbh/ngx-mat-select-search/issues/83