Фильтр массива по ключевому слову не работает в Angular

Question

Я создал угловой «компонент фильтра» для фильтрации массива и распечатывания его содержимого. Я получаю ключевое слово как value для массива фильтра из другого компонента службой. В html value и весь массив отображается, но массив фильтров не отображается.

Ниже мой код:

result.component.ts

import { Component, OnInit} from '@angular/core';
import { SendDataService } from "./../send-data.service";
import { HttpClient} from '@angular/common/http';
import { JsoncallItem } from "./../jsoncall-item";

@Component({
  selector: 'app-search-result',
  templateUrl: './search-result.component.html',
  styleUrls: ['./search-result.component.css']
})
export class SearchResultComponent implements OnInit {

    _postsArray: JsoncallItem[] = [];

    private postsURL ="http://myapp/browse/all/all";

  constructor(private http: HttpClient, private data: SendDataService){}

  getPosts(): void{
  this.http.get<JsoncallItem[]>(this.postsURL).
  subscribe(
      resultArray => {this._postsArray = resultArray['data'];
   })
  }

  value: string;

  filterarray: any[];

  showData(){
    this.filterarray=this._postsArray.filter(
        f => f.title.toLowerCase().includes(
          this.value.toLowerCase()))
    .map(searchname=>searchname.title)
  }

    ngOnInit(): void{
    this.getPosts();
    this.showData();
    this.data.currentValue.subscribe(value => this.value = value)

  }

}

result.component.html

<p>{{value}}</p>
<table">
    <tr *ngFor="let item of filterarray">
        <td>{{item}}</td>
    </tr>
</table>

Только {{value}} показывает, а {{item}} нет. Как я могу решить это?

Answer 1

Вы вызываете this.getPosts и this.showData оба по порядку в ngOnInit ()

this.getPosts - это асинхронный вызов, поэтому ваш this.showData выполняется до того, как будут получены результаты из этого.getPosts. Следовательно нечего фильтровать:)

Решение этой проблемы заключается в том, чтобы поместить this.showData в обратный вызов успеха this.getPosts. Следовательно, showData будет вызываться только тогда, когда метод get успешно завершен и есть данные для фильтрации:)

Примерно так.

getPosts(): void{
  this.http.get<JsoncallItem[]>(this.postsURL).
  subscribe(
      resultArray => {this._postsArray = resultArray['data'];
      this.showData();
   })
  }

И удалите this.showData из ngOnInit ()

Надеюсь, это поможет.