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

您正在ngOnInit（）上依次调用this.getPosts和this.showData

this.getPosts是一个异步调用，因此您的this.showData在获取this.getPosts的结果之前正在运行。因此，没有什么可以过滤的：）

解决方案是将this.showData放入this.getPosts的成功回调中。因此，只有在get方法成功完成并且有一些数据需要过滤时才会调用showData：）

这样的事情。

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

并从ngOnInit（）中删除this.showData

希望这会有所帮助。

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

1 个答案: