角材料垫自动完成问题答案

【问题标题】：angular material mat-autocomplete issues角材料垫自动完成问题
【发布时间】：2018-01-25 18:06:08
【问题描述】：

我有一个带有 mat-autocomplete 的输入框。我点击了一个搜索按钮来获取匹配的条目以填充建议。虽然总体上它有效，但行为有点烦人。这就是发生的事情：

我输入 ra 并回车。
在进度指示器返回之后，我看不到其他视觉变化。
如果我按下向下或向右箭头等，我看不到任何建议
如果我删除最后一个字符，则会显示建议。

用户界面代码如下：

<div fxLayout="row" fxLayoutAlign="start center">
      <div>
        <form >
            <mat-form-field >
                <input type="text" placeholder="Opportunity name" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                    {{ option.name }}
                </mat-option>
                </mat-autocomplete>
            </mat-form-field> 
            </form>
      </div>
      <div>&nbsp;<mat-icon (click)="refreshOptyList()">search</mat-icon>
      </div>  

  </div>

refreshOptyList函数如下：

refreshOptyList(){
       this.diaRef = this.dialog.open(MessageDialogComponent, {
          width: '250px',
          disableClose: true,
          data: { "message": "Please wait...", "showProgress": true }
     });

      this.revSvc.getOptyList(this.keyword).then(
        (val:any) => {
                        this.diaRef.close()
                        this.optyArr = JSON.parse(val._body).items;

                        for(let op of this.optyArr){
                          this.options.push(new Opty(op.Name, op.OptyNumber))
                        }
                     }
      )

  }

【问题讨论】：

你能添加过滤选项逻辑吗？您正在引用 this.options 但我可以在任何地方播种 filterOptions。

标签： angular-material mat-autocomplete

【解决方案1】：

我目前正在使用相同的材料，但我注意到这里有些不同。

遗憾的是，我不能保证这是否会起作用，因为我自己是 Material 新手，但希望这会对你有所帮助：

您的查询功能应在您的选项中使用。我不知道这是否可行

*ngFor="let option of refreshOptyList()

您可以尝试的其他方法是在查询函数中返回 $http 响应

return $http( { url: '/foo/bar', method: 'POST', data: JSON.stringify({})  })
.then(response => {
    return response.data;
})
.catch(err => {
    return []; // { error: { source: "foo/bar/post" }, err: err };
});

希望这会有所帮助:)

【讨论】：