更新

Question

我试图在页面上填充数据但是，它没有在页面上呈现。相反，它抛出一个错误信息：

core.es5.js：1020 ERROR SyntaxError：意外的令牌＆＃39;在位置322的JSON中

问题-card.component.ts

import { Component, OnInit } from '@angular/core';
import { RetrieveDataService } from '../retrieve-data.service';

@Component({
  selector: 'app-question-card',
  templateUrl: './question-card.component.html',
  styleUrls: ['./question-card.component.css']
})
export class QuestionCardComponent implements OnInit {
 question = '';
 questions = [];
  constructor(private retrieveDataService: RetrieveDataService) {
    this.appendContent();  
  }

  ngOnInit() {
  }

  appendContent(){
    for (var i = 0; i < 5; i++) {
      this.retrieveDataService.fetchData().subscribe(data=>{
            if (data[i].type == "question-card") {
                this.question = (data[i].question);
                this.questions.push(this.question);
            }
       });  
    }
  }
}

问题-card.component.html

<div class="container" *ngFor="let question of questions">
<h3>{{question.section}}</h3>
</div>

检索-data.service.ts

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

@Injectable()

export class RetrieveDataService {
  constructor(private http: Http) { 
  }
  fetchData(){
      return this.http.get('assets/page-content.json').map(
        (response) => response.json()
      )
  }
}

网页-content.json

[
    {
        "id": 1,
        "type": "question-card",
        "section": "some text comes here...",
        "headline": "some text comes here...",
        "question": "some text comes here...?",
        "options": ['<25%', '25-50%', '51-75%', '>75%'],
        "notes": "some text comes here..."
    },
    {
        "id": 2,
        "type": "question-flipping-card",
        "section": "some text comes here...",
        "headline": "some text comes here...",
        "options": ['<25%', '25-50%', '51-75%', '>75%']
    }
]

Answer 1

如果您知道json的长度，可以使用let代替var。 let将保留该块作用域异步操作的i。如果您使用var，那么i将是所有异步操作的最后一个值：

appendContent(){
  this.retrieveDataService.fetchData().subscribe(data=>{
        for (let i = 0; i < data.length; i++) {
            if (data[i].type == "question-card") {
                this.questioncard = data[i];
                this.questionscard.push(this.questioncard);
            }
        } 
   });  

 }

}

<强> HTML：

<div class="container" *ngFor="let q of questionscard">
   <h3>{{q?.section}}</h3>
</div>

Answer 2

更新

首先，您实际上多次调用服务。 map和subscribe已经遍历了响应数据，您不需要for循环。

其次，Angular不会在数组变异（Array.push或shift）之后更新HTML，你可以......

像这样设置新值

this.questions = [...this.questions, this.question]
或使用Observable模式

试试这个

  appendContent() {
    this.retrieveDataService.fetchData() 
      .filter((item) => item.type === 'question-card') 
      .subscribe(data => {
        this.questions = [...this.questions, data]
      });
  }

了解更多sample here

原始答案

在你的json文件中。

{
 // .. 
 "options": ['<25%', '25-50%', '51-75%', '>75%'],
}

单引号'不是有效的JSON格式

将'替换为"

来自www.json.org

值可以是双引号或数字，或true或false或null，或对象或数组的字符串。这些结构可以嵌套。

如何以角度4过滤JSON数据

2 个答案:

更新

原始答案