从Angular2中的JSON数组打印属性值答案

【问题标题】：print attributes values from JSON array in Angular2从Angular2中的JSON数组打印属性值
【发布时间】：2016-07-21 17:54:03
【问题描述】：

我正在使用 Angular2，并以这种方式从 Firebase 检索了一些数据：

dataset: any;
onGetData() {
    this._dataService.getAllData()
        .subscribe(
        data => this.dataset = JSON.stringify(data),
        error => console.error(error)
    );

如果我打印 dataset 我会得到这个 JSON：

{"-KE8XuCI7Vsm1jKDJIGK":{"content":"aaa","title":"bbb"},"-KE8XvM268lWhXWKg6Rx":{"content":"cccc","title":"dddd"}}

如何打印出仅由该 JSON 数组中的 title 值组成的列表？

我想要：bbb - dddd

【问题讨论】：

标签： arrays angularjs json angular

【解决方案1】：

您只能使用 ngFor 遍历数组。在您的情况下，您需要实现一个自定义管道来迭代对象的键。

类似的东西：

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

并像这样使用它：

<span *ngFor="#entry of dataset | keyValues">           
  Title: {{entry.value.title}}
</span>

查看这个问题了解更多详情：

How to display json object using *ngFor

【讨论】：

【解决方案2】：

在你看来你需要

<div *ngFor='#data of dataset'>
    {{ data.title }} -
</div>

【讨论】：

它不起作用。我已经尝试过这种方式：stackoverflow.com/questions/36339173/… 但我得到了那个错误。我也尝试添加一个管道 MapToIterable 但它仍然没有工作
哦，那是因为数据集不是数组。你需要它是一个数组来循环遍历这样的数据
我在控制台中收到此错误：错误：找不到不同的支持对象 '{"-KE8XuCI7Vsm1jKDJIGK.... 我尝试使用数据集：对象 [] 而不是数据集：任何但它给了我此行错误：data => this.dataset = JSON.stringify(data)