Question

我正在尝试创建一个客户（或任何东西）的下拉列表，利用Angular 5 Material的自动完成功能。但与Angular网站上提供的示例不同，我的数据不是静态的，而是在数据调用getAllCustomer()后返回。

我遇到的问题似乎是在从filterOptions方法返回数据之前分配了getAllCustomer()。

如何在数据返回后确保仅指定filterOptions

这是我的代码：

filteredOptions: Observable<string[]>;

constructor(private loadDataService: LoadDataService, private assetDataService: AssetDataService, private router: Router, private toastr: ToastrService) { }

ngOnInit() {
    this.getAllCustomers();
    this.filteredOptions = this.myCustomerSearchControl.valueChanges.pipe(
      startWith(''),
      map(val => this.filter(val))
    );
}

filter(val: string): string[] {
    return this.customerArray.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}

getAllCustomers() {
    this.loadDataService.getAllCustomers()
    .subscribe(data => {
      this.customerArray = data;
    });
}

这是我的HTML：

<mat-form-field>
    <input type="text" placeholder="Customer Search" aria-label="Number" matInput [formControl]="myCustomerSearchControl" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{ option }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

作为奖励，我如何能够实现相同的功能，但使用实际的搜索功能，当用户在搜索框中键入时返回数据 - 即通过字符串方法搜索？

这是我的searchByString功能：

searchForCustomerByString(string) {
    this.loadDataService.getCustomer(string)
      .subscribe(data => {
        this.returnedCustomers = data;
      });
}

Answer 1

您可以在订阅结果中定义变量，如下所示：

getAllCustomers() {
    this.loadDataService.getAllCustomers()
    .subscribe(data => {
      this.customerArray = data;
      this.filteredOptions = this.myCustomerSearchControl.valueChanges.pipe(
          startWith(''),
          map(val => this.filter(val))
      );
    });
}

但是变量 filteredOptions 可能没有被初始化，所以你可以使用像 BehaviorSubject 这样的东西来初始化变量。

Answer 2

对此更好更清洁的解决方案是使用冷可观测量。

helloWorld, quickChatUserReport, activeThreadsReport

没有直接订阅需要存储和取消订阅您的组件。

如何设置Angular Material Autocomplete（下拉列表）以处理从数据调用返回的数据（filteredOptions调用为early）

2 个答案: