1

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

  1. 我输入 ra 并回车。
  2. 在进度指示器返回之后，我没有看到其他视觉变化。

  3. 如果我按下向下或向右箭头等，我看不到任何建议

  4. 如果我删除最后一个字符，那么它会显示建议。

用户界面代码如下所示：

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

  }
4

1 回答 1

0

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

可悲的是，我不能保证这是否会起作用，因为我自己是 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 };
});

希望这可以帮助 ：）

于 2018-01-25T10:06:08.897 回答