在 Angular 5 中显示一个对象

Question

我已经创建了一个从 Firebase 获取数据的变量。它返回一个包含两个部分的对象到其中的对象，但是当我尝试使用字符串插值时，它返回[object Object]。我试过做一个 *ngFor 但是我得到这个错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

这是我的变量：

this.groupMembers = this.currentGroup.members_uid;
    console.log(this.groupMembers)

console.log 在控制台中返回：

  {7TkrG4Ty2pf2OBy9whhSsSl1sC22: true, by285gAhkdRg4rDMkujzSQXxGAJ2: true}
7TkrG4Ty2pf2OBy9whhSsSl1sC22
:
true
by285gAhkdRg4rDMkujzSQXxGAJ2
:
true
__proto__
:
Object

1. 如何访问它以在我的 html 中显示其内容？

2. 如何在我的 ts 文件中创建一个新变量，该变量也以某种方式“循环”它们，以便我可以单独访问每个部分？

编辑****

 this.currentGroup = this.currentGroupId$
        .pipe(switchMap(id => this._group.getGroupById(id).valueChanges()))

然后返回一个 Observable，我将其输入到子组件中，如下所示：

*ngIf="currentGroup | async as group" [currentGroup]="group"

并称之为：

@Input() currentGroup: any;

Answer 1

我相信 AngularJs 在插值时会显示对象的内容。这不是 Angular 默认支持的行为，但很容易实现。

快速而肮脏的方法是在组件中添加一个函数，使用JSON.stringify() 将对象转换为字符串。更简洁的解决方案是创建一个 Pipe 来执行相同的活动：

@Pipe({
  name: 'stringify'
})
export class StringifyPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return JSON.stringify(value);
  }
}

添加管道后，您可以非常简单地在代码模板中显示它。

<pre>{{groupMembers | stringify}}</pre>

您可以轻松地扩展 Pipe 以格式化代码以使显示效果更好，或者您可以创建一个将其呈现为 html 的组件，而不是使用 pre 元素。哎呀，我很惊讶组件还不存在。