Question

我有一个垫子自动完成组件，其中的选项连接起来，可以在用户键入（部分搜索）时从服务调用中填充：

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

在我的TS代码中，我将在用户选择值的处理结束时将options数组设置为空数组。

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

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

谢谢！

Answer 1

您是否使用反应形式？我做了类似的事情（based on this article）;

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;
}

Answer 2

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

mat-autocomplete：选择后需要重置选项列表

2 个答案: