开发者问题收集

Angular forEach 无法读取属性

2018-08-31
722

我使用 Angular 从 url 获取 JSON 数据,并使用搜索词过滤 JSON 数据并创建一个新数组,以便在 HTML 中查看过滤后的 JSON 数据。 但是当我打开页面时,控制台显示“无法读取未定义的属性‘forEach’”

这是代码:

search-result.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from "rxjs";
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[] = [];

    @Input() value: string;
    @Input() showthis: boolean;

    private postsURL ="http://cloudofgoods3/anguler_app_items";

  newArr: any[] = [];

  constructor(private http:HttpClient) { }

      getPosts(): void{
        this.http.get<JsoncallItem[]>(this.postsURL).
        subscribe(
            resultArray => {this._postsArray = resultArray;
          this.getResult();
       })
  }
  getResult(){
      this._postsArray.forEach(function(term){
        if(term.title == this.value){
          this.newArr.push(term.title)
        }
      }.bind(this));
  }

  ngOnInit(): void{
    this.getPosts();
  }
}

search-result.compenent.html:

<ul *ngIf="showthis">
    <li *ngFor="let item of newArr">
        Say {{item}}
    </li>
</ul>

哪里错了?

2个回答

这意味着您的数组 未定义 ,您在设置 _postsArray 之前调用了该函数。您可以通过检查来修复它或初始化数组,

//Initialize as

_postsArray: JsoncallItem[] = [];

if(this._postsArray && this._postsArray.length > 0){
 this._postsArray.forEach(function(term){
        if(term.title == this.value){
          this.newArr = this.newArr + [term.title]
        }
  }.bind(this));
}
Sajeetharan
2018-08-31

初始化数组

_postsArray: JsoncallItem[] = [];

订阅后调用 setResult 而不是onInit。

  subscribe(  resultArray =>{
          this._postsArray = resultArray;
          this.setResult();
   })
Sachila Ranawaka
2018-08-31