Question

我正在尝试使用angular2组件动态创建树视图，最终将驱动用户定义内容的显示。 angular-tree-component期望一个符合特定JSON结构的参数。

我的firestore设置是这样的：

> Treeview(Collection
> ---Node1(Document)
> ------name: string
> ------id: number
> ---Node2(Document)
> ------name: string
> ------id: number

示例服务 - 我正在从文件导入TreeModel接口，该接口符合预期的JSON。所以在最后，我能够返回一个名为TreeData $的Observable对象，我可以自己迭代使用异步管道。但是，角度2树组件不喜欢可观察的。

export class TreeserveService {

    private treeCollectionRef: AngularFirestoreCollection<TreeModel>;
    public treeData$: Observable<TreeModel[]>;

  constructor(private afs: AngularFirestore) {
      this.treeCollectionRef = this.afs.collection<TreeModel>('Treeview')
      this.treeData$ = this.treeCollectionRef.valueChanges()
  }

  getTreeViewData(): Observable<TreeModel[]> {
    return this.treeData$
  }
  }

示例组件 - 该模板驱动树视图的创建，并要求参数“tree”为特定的JSON结构。

    @Component({
  selector: 'app-treeview',
  templateUrl: './treeview.component.html',
  styleUrls: ['./treeview.component.css'],
  template: '<tree-root [nodes]="tree"></tree-root>'

}) 
export class Treeview implements OnInit {

  public tree: Observable<TreeModel[]>;

  constructor(private Treeserve: TreeserveService) {
tree = this.Treeserve.TreeData$

  }
  ngOnInit() {


  }

我开始试图对此非常基本，只是从我的firestore数据库中获取2个节点。

我尝试过的事情：

我尝试挖掘实际的树组件，看看是否可以添加“异步”管道来进行展开。我实际上得到了错误消失，但没有任何东西出现。
我查看了.subscribe（）。map（）。flattmap（）以及大量的RJXS运算符。我发现的几乎所有信息都与http.get或较旧的Firebase模型（具有某种列表功能）有关。
我在AFS调用中考虑过使用ValueChange（）以外的东西，但我不确定是否还需要更多元数据。

我希望有一个.map（）解决方案使用我还没想到的语法。如果我可以使用某种'ifFor'语句迭代observable，并将ID和Name映射到树组件可以读取的对象或数组中的正确键值对，那将是非常棒的。

这是我在控制台中遇到的错误：

NgFor仅支持绑定到诸如数组之类的Iterables。

当我在treeData $的服务中或在组件中的this.tree上执行console.log时，我得到这样的结果：

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator
:
MapOperator
project
:
ƒ (actions)
arguments
:
(...)
caller
:
(...)
length
:
1
name
:
""
prototype
:
{constructor: ƒ}
__proto__
:
ƒ ()
[[FunctionLocation]]
:
collection.js:35
[[Scopes]]
:
Scopes[3]
thisArg
:
undefined
__proto__
:
Object
source
:
Observable {_isScalar: false, source: Observable, operator: MapOperator}
_isScalar
:
false
__proto__
:
Object

Answer 1

我最终提出了解决这个具体问题的方法。我需要订阅observable并将其分配给一个数组。现在，当我在Firestore中添加新文档时，列表中会出现一个新项目。

我需要解决的另一件事是如何从Firestore中执行嵌套子项。

template: '<tree-root [nodes]="treeData"></tree-root>',    
public treeData: TreeModel[] 

    this.Treeserve.getTreeViewData()
              .subscribe(nodes => {
                this.treeData = nodes as TreeModel[]
                console.log(this.treeData)
              })
        }

Angularfire2 Firestore - 将Observable展开为JSON数组

1 个答案: