[ad_1]
I am trying to use an angular2 component to dynamically create a Tree view that will eventually drive the display of user-defined content. angular-tree-component is expecting an argument that conforms to a specific JSON structure.
My firestore setup is like this:
> 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. 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. However, the angular 2 tree component does not like the observable.
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.
@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.
Things I have tried:
- I tried digging into the actual tree component to see if I could add an 'async' pipe to do the unwrapping. I actually got the error to go away, but nothing was showing up.
- I have looked into .subscribe() .map() .flatmap() and a whole slew of RJXS operators. Almost all of the information I have found has pertained to either http.get, or the older Firebase model (that had some sort of list function).
- I have looked into using something other than ValueChange() in the AFS call, but I'm not sure if I need more metadata yet.
I'm hoping there is a .map() solution using a syntax I haven't figured out yet. 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.
This is the error I get in console:
NgFor only supports binding to Iterables such as Arrays.
When I do a console.log in the service for treeData$ or on this.tree in the component I get something like this:
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
[ad_2]
لینک منبع
