Асинхронное отображение угловых данных сервера с фильтром - PullRequest
Новая
       9

Асинхронное отображение угловых данных сервера с фильтром

0 голосов
/ 16 октября 2018

Я могу отображать данные сервера с помощью метода httpClient.get, но, как только я использую свой фильтр, некоторые из извлеченных объектов Master [] не отображаются.Мне нужно продолжать вводить в поле ввода моего фильтра, чтобы наконец все вместе отображалось.

Мой код машинописного текста для получения данных сервера: 

getMastersShort(): Observable < Array < NewMaster >> {
    return this.httpClient.get < Array < NewMaster >> (environment.apiBaseUrl + '/azuredevices/twinsshort/');

Из Masters Component.ts, где я получаю данные: 

export class MastersComponent implements OnInit {
  newMasters: Observable < Array < NewMaster >> ;
  filterString: string;
  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log("Masters initialisiert");
    this.newMasters = this.dataService.getMastersShort();
  }

  passedFilter(newMaster: NewMaster, deviceProp = "DeviceId", filterString = this.dataService.inputFilter) {
    if (newMaster[deviceProp].toLowerCase().includes(filterString.toLowerCase()) || filterString === "") {
      return true;
    } else {
      return false;
    }
  }

}

И последний - это HTML-код компонента Masters, где я попытался использовать асинхронный канал для решения своей проблемы: 

<div class="row justify-content-center" style="margin-bottom: 30px;">
  <div *ngFor="let master of newMasters | async">
    <div *ngIf="passedFilter(master)">
      <div class="col-sm-4">
        <app-master [master]="master">
        </app-master>
      </div>
    </div>
  </div>
</div>

Вот некоторые изображения, показывающие мою проблему:
Мои мастера после инициализации
Мои мастера с примененным фильтром
Мой мастер после удаления фильтра
Когда я продолжаю нажимать клавишу Backspace (даже если в фильтре больше нет символов), страница загружает всех мастеров и разрешается в указанном состояниина первом рисунке.

...