Question

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

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

ui代码如下：

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

  }

Answer 1

我目前使用的材料相同，而且我注意到了不同的内容。

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

您的查询功能应该在您的选项中使用。我不知道这是否会起作用

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

希望这会有所帮助：）

角度材料垫自动完成问题

1 个答案: