5

我有一个 mat-autocomplete 组件，其中包含连接选项，以便在用户键入时从服务调用中填充（部分搜索）：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="areaSelected($event.option.value)">
      <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
</mat-autocomplete>

在我的 TS 代码中，当用户选择一个值时，我在处理结束时将选项数组设置为一个空数组：

  resetFetchedOptions() {
    this.options = [];
}

这在调用代码时起作用，并且 this.options 设置为空数组。问题是当用户尝试在字段中键入另一个值时，之前的选项仍然存在。如果他们键入，选项将被清除，并填充基于部分搜索的新选项，所以我认为这是一个渲染问题，但我对 Angular Material 有点陌生，所以我不确定这是否是错误的方法，或者我错过了一步。

谢谢！

4

2 回答 2

3

你在使用反应形式吗？我做了一个类似的事情（基于这篇文章）；

html

<mat-form-field class="width-filler">
    <input type="text" matInput placeholder="Search" [matAutocomplete]="auto" [formControl]="formControl" autocomplete="off" autofocus>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunc">
        <mat-option *ngIf="isSearching" class="is-loading"><mat-spinner diameter="20"></mat-spinner></mat-option>
        <mat-option *ngFor="let result of filteredResult" [value]="result">
            {{result.description}}
        </mat-option>
    </mat-autocomplete>
    <mat-hint>{{searchHint()}}</mat-hint>
</mat-form-field>

打字稿

ngOnInit() {
    this.formControl
        .valueChanges
        .pipe(
            debounceTime(300),
            tap(() => this.isSearching = true),
            switchMap(value => this.someService.searchStuff<ResultType[]>(this.getSearchString(value as any))
                .pipe(
                    finalize(() => this.isSearching = false),
                )
            )
        )
        .subscribe(result => this.filteredResult = result);

    this.formControl.valueChanges.subscribe(value => this.setValue(value));
}

// Need to handle both the search string and a selected full type
private setValue(value: string | ResultType) : void {
    if (typeof value === "string")
        this.selectedValue = null;
    else
        this.selectedValue = value;
}

private getSearchString(value: string | ResultType) {
    if (typeof value === "string")
        return value;
    else
        return value.description;
}
于 2019-09-04T10:45:53.380 回答
1

我认为这是因为您保留对原始数组的引用，尝试this.options.length=0而不是= []

于 2019-09-04T10:30:50.777 回答