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

Answer 2

我更喜欢避免在代码中重播主题（或一般主题），因此请使用以下内容：

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

ngx-mat-select-search不起作用

2 个答案: