Question

export class HomePage {
  items = [
    {
      title: 'Courgette daikon',
      content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
      icon: 'calendar',
      time: {subtitle: '4/16/2013', title: '21:30'}
    },
    {
      title: 'Courgette daikon',
      content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
      icon: 'calendar',
      time: {subtitle: 'January', title: '29'}
    },
    {
      title: 'Courgette daikon',
      content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
      icon: 'calendar',
      time: {title: 'Short Text'}
    }
  ]
  constructor(public navCtrl: NavController) {

  }

}

手动输入json的insted，我想从

的json文件中导入它

{＆＃34; items＆＃34;：[{＆＃34; agendaid＆＃34;：＆＃34; 1＆＃34;，＆＃34; title＆＃34;：＆＃34; Avreise Medina＆＃34 ;，＆＃34;内容＆＃34;：＆＃34; Avreise 直到18:00，麦克风是冲浪者计时器f \ u00f8r avreise。 Alle m \ u00e selv komme tidsnok til \ u00e5 我喜欢萨姆门和家庭。 Det er kun lov til \ u00e5 ha med seg 30 kg baggasje og 7 kg ħ\ u00e5ndbaggasje＆＃34;＆＃34;图标＆＃34;：＆＃34;平面＆＃34;＆＃34; TimeTitle＆＃34;：＆＃34; 2017年12月21日＆＃34;＆＃34; TimeSubtitle＆＃34;：＆＃34; 18：30＆＃34;＆＃34; ExecuteTime＆＃34;：＆＃34; 2017年12月21日 18：30：00＆＃34;}，{＆＃34; agendaid＆＃34;：＆＃34; 2＆＃34;＆＃34;标题＆＃34;：＆＃34;测试＆＃34;＆＃34 ;内容＆＃34;：＆＃34;测试＆＃34;＆＃34;图标＆＃34;：＆＃34;测试＆＃34;＆＃34; TimeTitle＆＃34;：＆＃34;测试＆＃34; ＆＃34; TimeSubtitle＆＃34;：＆＃34;测试＆＃34;＆＃34; ExecuteTime＆＃34;：＆＃34; 2017年11月22日 17：26：23＆＃34;}]}

我试图用这段代码在离子3中读取它

    url: string = 'http://backend.mishkaat.no/app/agenda.php';
        items: any = [];

        constructor(public navCtrl: NavController, public navParams: NavParams,private http: Http ) {}

        ionViewDidEnter() {
            this.http.get( this.url )
            .map(res => res.json())
            .subscribe(data => {
              // we've got back the raw data, now generate the core schedule data
              // and save the data for later reference
              this.items = data;
            });
        }

但是得到了这个错误：

    Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
        at DefaultIterableDiffer.diff (http://localhost:8100/build/vendor.js:7695:19)
        at NgForOf.ngDoCheck (http://localhost:8100/build/vendor.js:43776:57)
        at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:12451:19)
        at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:13951:20)
        at checkAndUpdateNode (http://localhost:8100/build/vendor.js:13894:16)
        at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:14766:76)
        at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:14707:13)
        at Object.eval [as updateDirectives] (ng:///AppModule/AgendaPage.ngfactory.js:99:5)
        at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:14692:21)
        at checkAndUpdateView (http://localhost:8100/build/vendor.js:13861:14)

在html文件中显示

    <timeline endIcon="call">
        <timeline-item *ngFor="let item of items">
          <timeline-time [time]="item.time"></timeline-time>
          <ion-icon [name]="item.icon"></ion-icon>
          <ion-card>
            <ion-card-header>
              {{item.title}}
            </ion-card-header>
            <ion-card-content>
              {{item.content}}
            </ion-card-content>
          </ion-card>
        </timeline-item>
    </timeline>

任何帮助？

Answer 1

我现在有问题中的原始json文件，但为什么我不能用这个脚本读取嵌套的json？

@Component({
  selector:'timeline-time',
  template: '<span>{{time.subtitle}}</span> <span>{{time.title}}</span>'
})
export class TimelineTimeComponent{
  @Input('time') time = {};
  constructor(){

  }
}

如何将json导入离子时间轴项目

1 个答案: