Question

我知道这可能是一个简单的解决方案。我正在构建一个Ionic 3应用程序，并能够连接到json数据文件并将对象打印到控制台，但我无法将item传递给我的搜索功能。我在页面上看到的错误是Runtime Error - Cannot read property "filter" of undefined - 我猜测它是因为该项目无法使用。

data.ts

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import "rxjs/add/operator/map";

@Injectable()
export class Data {
  items: any;

  constructor(public http: Http) {
    this.http
      .get("./assets/data/plaques.json")
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
        console.log(data);
      });
  }

  filterItems(searchTerm) {
    return this.items.filter(item => {
      return (
        item.veteran_first.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
      );
    });
  }
}

Answer 1

您在初始化之前尝试访问this.items。

http.get是一个异步函数，访问this.items时可能无法设置filterItems。

我强烈建议您阅读this question/answer，以便更好地理解javascript的异步性质。

Answer 2

你可以用这样的zone()来包装它吗：

this.zone.run(() => {
   this.items = data;
 });

http json数据打印到控制台但不打印到Ionic 3中的页面

2 个答案: