Question

我正在尝试使用angulafire2在我的Angular应用中使用存储在Firebase数据库中的数据，而我在嵌套数组方面遇到了一些问题。

我有一个看起来像这样的结构：

items{
    item1{
        name: item1,
        subitems{
            subitem1{
                name: subitem1
            },
            subitem2{
                name: subitem2
            }
        }
    }
}

我正在使用FirebaseListObservable来获取items数组。

items: FirebaseListObservable<any>;
[...]
this.items = this.af.database.list('/items');

当我尝试显示数据时会出现问题。

<div *ngFor="let item of items | async">
    <span>{{(item)?.name}}</span>

    <div *ngFor="let subitem of (item)?.subitems">
        <span>{{(subitem)?.name}}</span>
    </div>

</div>

我收到错误，因为item.subitems未被识别为数组。

错误：无法找到不同的支持对象'[object Object]' 输入'对象'。 NgFor仅支持绑定到Iterables，例如阵列。

编辑：我制作了一个使用Firebase中的测试数据库作为上述示例的插件。 HERE

Answer 1

我遇到了同样的问题，而不是firebase，但在这种情况下并不重要。

items: FirebaseListObservable<any>;
[...]
this.items = this.af.database.list('/items');
this.items.forEach(record => {
  console.Debug(record); // show output
  record.subitems.forEach(subRecord => { 
    console.Debug(subRecord); // show output too
  });
});

在排除此问题时，您可以获得控制台日志吗？在我的情况下，我做了，我有相同的结构。我正在看这个问题，以防它被解决。

Answer 2

我在我的案子中解决了它。

sub func {

    my ( $firm1, $firm2, $possible ) = @_;

    if ( defined $possible and $possible eq 'smth' ) {

        # Do something
    }
}

func( qw/ bla bla bla / );    # ok
func( qw/ bla bla / );        # now also ok

首先尝试这样做，这是在更改一些属性名称后工作。之后，替换您自己元素的元素，并在每次更改后对其进行测试，看看它是否仍然有效。

Answer 3

Firebase结构通常应避免深度嵌套。结构越深，它们就越复杂。

但是您可以使用Object.keys(obj)或实验Object.value(obj)等内容对结构进行映射并将对象转换为数组，或者在下面进一步编写您自己的函数

例如转换级别的键

this.items = db.list('/items').map(items => {
  return items.map(item => {
    return {
       item: Object.keys(item.subitem)
    }
  });
});

您也可以使用ngFor循环found in this stack question

中的函数执行此类操作

<li *ngFor="let o of obj">
   <p *ngFor="let item of generateArray(o)">{{item.key}}: {{item.value}}  </p>
</li>

使用此功能

generateArray(obj){
    return Object.keys(obj).map((key)=>{ return {key:key, value:obj[key]}});
}

哪个应该给你键和值

Firebase数据库中的嵌套数组

3 个答案: