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

如何访问它以在html中显示其内容？
如何在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元素。哎呀，我很惊讶一个组件还不存在。

在Angular 5中显示对象

1 个答案: