angular - 调用本地 json 文件时找不到类型为“object”的不同支持对象“[object Object]”

Question

导致错误消息的原因：

错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

我该如何解决？

公司.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);
    });
  }
}

搜索.ts

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);
  }
}

搜索.html

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

标签： angular

Answer 1

使用 ts 文件并导入它：

公司.ts

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

搜索.ts

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);
  }
}