按关键字过滤数组在Angular中不起作用

Question

I created an angular "filter component" to filter an array and print out its contents. I'm getting the keyword as value for filter array from another component by a service. In the html, value and the whole array is showing, but the filter array is not showing.

Below is my code:

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>

Only {{value}} is showing and {{item}} is not. How I can solve this?

Answer 1

You are calling this.getPosts and this.showData both one after another on ngOnInit()

this.getPosts is an asynchronous call, hence your this.showData is being run before the results from this.getPosts is fetched. Hence there is nothing to filter :)

The solution to this is to put this.showData within the success callback of this.getPosts. Hence showData will only be called when the get method has completed successfully and there is some data to filter :)

Something like this.

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

And remove this.showData from ngOnInit()

Hope this helps.