如何清除材料自動完成 angular 中的所有加載值？

Question

我正在嘗試在另一個 mat-select 字段的 selectionchange 上清除材料輸入字段中的所有加載值。 我只能清除選定的值，而不能清除輸入字段property中所有加載的值。 這是代碼。

HTML ：

<mat-form-field>
    <mat-select formControlName="searchType" (selectionChange)="searchTypeChange()" placeholder="Search By">
        <mat-option *ngFor="let st of searchTypes" [value]="st.value">
            {{st.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field *ngIf="searchForm.get('searchType').value==6" class="example-full-width">
    <input matInput placeholder="PropertyID" [formControl] ="property"    [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
        <mat-option *ngFor="let option of propertyfilteredOptions | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Typescript ：

ngOnInit(): void {
    this.searchForm=this.fb.group({
       prop:this.property,
    });
}
searchTypeChange(){
    this.searchForm.get('prop').setValue('');
    this.property.reset(); //this is not working
}

Answer 1

您正在嘗試重置 FormControl。 它不向 MatSelect 提供數據。 它從訂閱中獲取數據 - propertyfilteredOptions | async propertyfilteredOptions | async 。 您需要將新值傳遞給propertyfilteredOptions Observable。

你也可以 f.ex. 只需將其更改為新的 Observable：

this.propertyfilteredOptions = new Observable([]);