mat-autocomplete を使用する入力を再設定しようとしています。ただし、値を送信してthis.optionForm.patchValue({selectedOption: 'my value'})
も結果が GUI に表示されません。値console.log()
が設定されていることがはっきりとわかります。この問題が、フィールドにオブジェクトを設定することもあれば、文字列だけを設定することもあるという事実に関係があるかどうかはわかりません。しかし、入力に結果を再入力して適切に表示できるようにしたいと考えています。どのように試しても、結果を表示できないようです。
以下は、問題の入力だけに切り詰められたコンポーネントと、の結果を取得している Observable ですmat-autocomplete
。これらは、フォームが初めて使用されるときに正常に機能します。
// component.html
<mat-form-field>
<mat-label>Option Object</mat-label>
<input type="text" matInput formControlName="selectedOption" required
[matAutocomplete]="autoGroup">
<mat-autocomplete #autoGroup="matAutocomplete"
(optionSelected)="updateOptionInfo($event.option.value)"
[displayWith]="displayFn">
<mat-option *ngFor="let result of resultOptions | async" [value]="result">
<span>{{result}}</span>
</mat-option>
</mat-autocomplete>
// component.ts
this.resultOptions = this.optionForm.get('selectedOption').valueChanges
.pipe(
debounceTime(300),
switchMap(value => {
if (value === '') {
this.clearProviderInfo();
return of(null);
}
if (value !== '' && ((typeof value) !== 'object')) {
return this.optionService.fetchAndFilterOptions(value)
.pipe(
catchError((e) => {
console.error(e);
return of([]); // empty list on error
})
);
} else {
return of(null);
}
})
);
どんな助けでも大歓迎です!