Угловой материал мат-автозаполнение вопросов

Question

У меня есть поле ввода с мат-автозаполнение. есть кнопка поиска, которую я нажимаю, чтобы получить соответствующие записи для заполнения предложений. Хотя в целом это работает, но поведение немного раздражает. Вот что происходит:

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

  }

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

Надеюсь это поможет:)