Angular 找不到不同的支持对象'；[对象对象]'；类型为'；对象'；调用本地json文件时

导致错误消息的原因：

错误：找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

我该如何修复它

companys.json

[
  {
    "name": "one"
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four"
  },
  {
    "name": "five"
  }
]

虚拟api.ts

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

@Injectable()
export class DummyApi {
  constructor(public http: Http) {}

  filterCompanies(searchTerm) {
    return this.http.get('assets/data/companies.json').map(res => res.json()).subscribe((data) => {
      return data.filter(t=>t.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
    });
  }
}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NavController } from 'ionic-angular';
import { DummyApi } from '../../providers/dummy-api/dummy-api';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [DummyApi]
})
export class SearchPage {

  searchTerm: string = '';
  searchControl: FormControl;
  companies: any;
  searching: any = false;

  constructor(public navCtrl: NavController, public dummyApiService: DummyApi) { 
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredCompanies();
  }

  setFilteredCompanies() {
    this.companies = this.dummyApiService.filterCompanies(this.searchTerm);
  }
}

search.ts

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

@Injectable()
export class DummyApi {
  constructor(public http: Http) {}

  filterCompanies(searchTerm) {
    return this.http.get('assets/data/companies.json').map(res => res.json()).subscribe((data) => {
      return data.filter(t=>t.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
    });
  }
}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NavController } from 'ionic-angular';
import { DummyApi } from '../../providers/dummy-api/dummy-api';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [DummyApi]
})
export class SearchPage {

  searchTerm: string = '';
  searchControl: FormControl;
  companies: any;
  searching: any = false;

  constructor(public navCtrl: NavController, public dummyApiService: DummyApi) { 
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredCompanies();
  }

  setFilteredCompanies() {
    this.companies = this.dummyApiService.filterCompanies(this.searchTerm);
  }
}

search.html

<ion-item *ngFor="let company of companies">
  {{ company.name }}
</ion-item>

{{company.name}

使用ts文件并将其导入：

公司

export const companies = [
  {
    "name": "one"
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four"
  },
  {
    "name": "five"
  }
];

搜索引擎

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NavController } from 'ionic-angular';
import { DummyApi } from '../../providers/dummy-api/dummy-api';
import 'rxjs/add/operator/debounceTime';

// import it
import { companies } from './companies'

@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  providers: [DummyApi]
})
export class SearchPage {

  searchTerm: string = '';
  searchControl: FormControl;

  // Set the value
  companies = companies;
  searching: any = false;

  constructor(public navCtrl: NavController, public dummyApiService: DummyApi) { 
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredCompanies();
  }

  setFilteredCompanies() {
    this.companies = this.dummyApiService.filterCompanies(this.searchTerm);
  }
}

---

是否可以创建stackbiltz pls？您的服务将返回订阅对象。如果使用实际类型而不是任何类型，则无法迭代订阅。服务不能订阅。它必须返回一个可观察的。组件（或使用异步管道的视图）应该订阅。请升级并停止使用不推荐使用的Http服务和RxJS5。@JBNizet谢谢。我试图将这两个教程结合起来：并创建一个从本地json文件加载以填充过滤列表的解决方案。如何解决这个问题？我相信您最好使用一个常量而不是json创建一个

.ts

文件，然后简单地导入它