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

Posted 2023-03-13

【中文标题】从Angular2中的JSON数组打印属性值

【英文标题】：print attributes values from JSON array in Angular2

【发布时间】：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

【参考方案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>

【讨论】：

它不起作用。我已经尝试过这种方式：***.com/questions/36339173/… 但我得到了那个错误。我也尝试添加一个管道 MapToIterable 但它仍然没有工作

哦，那是因为数据集不是数组。你需要它是一个数组来循环遍历这样的数据

我在控制台中收到此错误：错误：找不到不同的支持对象 '"-KE8XuCI7Vsm1jKDJIGK.... 我尝试使用数据集：对象 [] 而不是数据集：任何但它给了我此行错误：data => this.dataset = JSON.stringify(data)