Question

我正在尝试使用Firebase在Angular2中制作递归树视图。 “root”加载得很好，但深入树不起作用。我相信这是因为我在一个函数中调用了另一个可观察的函数：

<ul>
    <div class='container' [dragula]='"first-bag"'>
        <li *ngFor="let parent of parents | async" (mouseover)="onMouseOver(parent)">
            <div *ngIf="parent.children">
                <div [class.over] = "parent.position == hoveredParent" [class.selected] = "parent.position == selectedParent"  tabindex="0"> 
                    <span>{{ parent.name }} </span>
                </div>

                <div *ngIf="parent.expanded">
                    <tree-view [parents]="getChilden(parent.$key)" [hoveredParent]="hoveredParent" [selectedParent]="selectedParent" (selectedParentChange)="selectParentChange($event);"></tree-view>
                </div>
            </div>
        </li>
    </div>
</ul>

成分：

import { Component, OnInit, Input, Output, HostListener, EventEmitter } from '@angular/core';
import {Parent} from '../parent';
import {TreeService} from '../tree.service'
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'tree-view',
  templateUrl: './tree-view.component.html',
  styleUrls: ['./tree-view.component.css']
})
export class TreeViewComponent implements OnInit {
  treeService: any;
  children: any[] = [];
  constructor(af: AngularFire) { 
    this.treeService = new TreeService(af);
  }

  @Input() parents: any;
  @Input() hoveredParent: number;
  @Input() selectedParent: number;
  @Output() selectedParentChange = new EventEmitter();

  ngOnInit() {
  }

  onMouseOver(parent: Parent) {
    this.hoveredParent = parent.position;
    console.log(parent);
  }

  onSelect(parent: Parent) {
    this.selectedParent = parent.position;
    this.selectedParentChange.emit({
        value: this.selectedParent
    })
  }

  selectParentChange(event: any) {
    this.selectedParent = event.value;
  }

  getChildren(key: any) {
    return this.treeService.getChildren(key);
  }
}

服务中的getChildren函数

  getChildren(keyParent: any) {
    return ( this.af.database.list('parents/' + keyParent + '/children'));
  }

如果父节点应该被扩展，我会尝试让底层父节点查询firebase，在其中查找相应的子节点。但是，如果我这样做（当记录而不是尝试返回某些内容时），它会一直记录observable。我认为可行的另一种方法是尝试获取对象本身，但是由于for循环中的异步管道，这不起作用。

我一直试图让这个工作几个星期，但我无法弄清楚如何解决这个问题。有没有人知道如何解决这个问题？

提前致谢，多米尼克

递归视图导致循环

0 个答案: