0

我正在尝试重新填充使用 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);
                }
            })
        );

任何帮助，将不胜感激！

4

2 回答 2

1

方法一：
使用setTimeout来达到预期的效果，使用如下 -

setTimeout(()=>{
      this.optionForm.patchValue({selectedOption: 'test'});
}, 0);

方法 2：
这种方法无需async

    //-----in component.html file, without async-------
        *ngFor="let result of resultOptions"


   // -------in component.ts file---------
    this.optionForm.get('selectedOption').valueChanges
        .pipe(
            debounceTime(300),
            switchMap(value => {
                if (value === '') {
                    this.clearInfo();
                    return of(null);
                }
                if (value !== '' && ((typeof value) !== 'object')) {
                    return of(this.pretendOptions);
                } else {
                    return of(null);
                }
            })
        ).subscribe(e=>this.resultOptions = e);

        //--- value is updated after subscribing to the `valueChanges`.    
        this.optionForm.patchValue({selectedOption: 'test'});

没有异步操作符的演示

于 2019-02-13T06:21:13.090 回答
1

我创建了一个 stackblitz 来重现这个问题：

https://stackblitz.com/edit/material-6-gh3rmt?file=app/app.component.ts

在这样做时，我意识到问题出在哪里！通过显示函数返回对象的某些属性，它显然会为字符串显示为空。所以对象正在设置并且可以在表单中看到，但是因为我使用了自定义显示函数，所以它被字符串上的 null 属性运行。

希望我可以帮助将来可能遇到此问题的其他人！

要充实此解决方案：

  displayFn(x) {
    return x.name; // if name doesn't exist this will obviously return null!
  }

因此，解决方法是在所选内容不是具有该.name属性的对象的情况下进行备份：

if ((typeof x) === 'string') {
    return x;
}
return x ? x.name : undefined;
于 2019-02-12T23:41:15.640 回答