[英]Angularfire2 Firestore - Unwrap Observable into JSON Array
I am trying to use an angular2 component to dynamically create a Tree view that will eventually drive the display of user-defined content. 我正在尝试使用angular2组件动态创建一个Tree视图,该视图最终将驱动用户定义内容的显示。 angular-tree-component is expecting an argument that conforms to a specific JSON structure.
angular-tree-component需要一个符合特定JSON结构的参数。
My firestore setup is like this: 我的Firestore设置如下:
> Treeview(Collection
> ---Node1(Document)
> ------name: string
> ------id: number
> ---Node2(Document)
> ------name: string
> ------id: number
Sample Service - I'm importing a TreeModel interface from a file, the interface conforms to the expected JSON. 样本服务 -我正在从文件导入TreeModel接口,该接口符合预期的JSON。 So at the end of this, I'm able to return an Observable object named TreeData$ that I can iterate through with no problems using the async pipe myself.
因此,在此过程的最后,我可以返回一个名为TreeData $的Observable对象,我可以使用异步管道自己进行遍历,而不会出现任何问题。 However, the angular 2 tree component does not like the 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$
}
}
Sample Component - The template drives the creation of the tree view, and requires the argument 'tree' to be a specific JSON structure. 示例组件 -模板驱动树视图的创建,并且要求参数“ 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() {
}
I'm starting out trying to be VERY basic about this, and just get the 2 Nodes from my firestore database to appear. 我开始尝试对此非常基础,只是从我的firestore数据库中获取2个节点出现。
Things I have tried: 我尝试过的事情:
I'm hoping there is a .map() solution using a syntax I haven't figured out yet. 我希望有一个.map()解决方案,其使用的语法我还没有想到。 It would be awesome if I could use some sort of 'ifFor' statement to iterate through the observable, and map the ID and Name to the correct key-value pair in an object or array that the tree component could read.
如果我可以使用某种'ifFor'语句来遍历可观察对象,并将ID和Name映射到树组件可以读取的对象或数组中的正确键值对,那将是很棒的。
This is the error I get in console: 这是我在控制台中得到的错误:
NgFor only supports binding to Iterables such as Arrays. NgFor仅支持绑定到Iterables,例如数组。
When I do a console.log in the service for treeData$ or on this.tree in the component I get something like this: 当我在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
I eventually came up with a solution to this specific issue. 我最终想出了解决这个特定问题的方法。 I needed to subscribe to the observable and assign it to an array.
我需要订阅可观察对象,并将其分配给数组。 Now when I add a new document in Firestore, a new item appears in the list.
现在,当我在Firestore中添加新文档时,列表中会出现一个新项目。
Next thing I need to tackle is how to do the nested children from 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)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.