从 json 角度读取数据到 textarea

Question

我正在尝试从本地 json 文件中读取一些测试数据，并将格式正确的数据输出到 textarea 中。现在虽然它只是输出 [object Object]。我将如何获得它以便输出：

Id: theIdGoesHere

标题：theTitleGoesHere

step.service.ts 用来调用json数据的服务

public getJson(): Observable<any>{
    return this.http.get('/assets/jsonData/MyJson.json')
      .map(response => response.json());
  }

MyJson.json

{
    "data":[
        {
            "id": 1,
            "title":"Test1"
        },
        {
            "id": 2,
            "title":"Test2"
        }
    ]
}

main.componenet.ts

private testVar: any;
test(){
    this.stepService.getJson().subscribe(data => (this.testVar = data));
  }

anothermethod(){
    this.test();
    this.mainStepText = this.testVar; //mainStepText binded to textarea with [(ngModel)]="mainStepText"
}

get mainStepText2() { //Rebinded this one
   const text = [];
    const { data } = this.testVar; 

    for (let item of this.testVar.data) {
      Object.keys(item).forEach(key => {
        text.push(key + ': ' + item[key]);
      });
    }

    return text.join('\r\n'); // \r\n is the line break
  }

Answer 1

您可以使用json 管道将您的对象格式化为json 字符串：

[(ngModel)]="mainStepText | json"

如果要显示对象的特定属性，可以在模板中访问它：

[(ngModel)]="mainStepText.data[0].title"

这将在您的字段中显示“Test1”。

Answer 2

您可以遍历您的 json.data 并通过它们的键来提取文本和值并生成文本区域所需的字符串。

    const text = [];

    for (let item of this.textVar.data) {
      Object.keys(item).forEach(key => {
        text.push(key + ': ' + item[key]);
      });
    }

    return text.join('\r\n'); // \r\n is the line break

这是运行代码，我把它放在app.ts中：http://plnkr.co/edit/3AbQYQOW0MVBqO91X9qi?p=preview

希望这会有所帮助。