Question

我想动态绑定mat-tree（角度材质）的数据。但是我的问题是在从已经实现的http服务获取实际数据之前，树的数据源是不确定的。我想填充（dfns）绑定到mat-tree中，以便防止获取[]数据，因此我决定在调用initialData（）之后将（this.GetData）放入构造函数类DynamicDatabase中以获取dfns数据，但此方法不起作用太。我可能会在不同的时间使用this.GetData来在我的树中获取子节点。因此，请在http调用返回数据后的所有位置为我提供帮助，以获取树的数据。这是我的代码。

export class DynamicFlatNode {
constructor(
  public Title: string,
  public id: string,
  public PID: number,
  public Type: string,
  public s: string,
  public children: boolean,
  public level: number = 1,
  public expandable: boolean = false,
  public isLoading: boolean = false) { }
}

@Injectable()
export class DynamicDatabase {
  dfns: DynamicFlatNode[];
  Tempchilddfns: DynamicFlatNode[];

  public GetData(
    url: string,
    ptitle: string,
    parentnode: string,
    level: number,
  ): DynamicFlatNode[] {
    let Tempdfns: DynamicFlatNode[] = [];
    ptitle = ptitle != '' ? '?ptitle=' + ptitle : '';
    parentnode = parentnode != '' ? '?parent=' + parentnode : '';

    this.service.callservice('get', url + ptitle + parentnode, '').subscribe(
      resdata => {
        Tempdfns = resdata.map(
          ContentNode =>
            new DynamicFlatNode(
              ContentNode.Title,
              ContentNode.id,
              ContentNode.PID,
              ContentNode.Type,
              ContentNode.s,
              ContentNode.children,
              level,
              ContentNode.children,
            ),
        );
      },
      err => {
        alert(err.json());
      },
    );
    return Tempdfns;
  }

  constructor(private service: Service) {
    this.dfns = this.GetData('Subject/scripts/Subjectw.ashx', '', '', 0);
  }

  initialData(): DynamicFlatNode[] {
    return this.dfns;
  }

  getChildren(
    url: string,
    ptitle: string,
    parentnode: string,
    level: number,
  ): DynamicFlatNode[] | any {
    this.GetData(url, ptitle, parentnode, level + 1);
  }
}

@Component({
  selector: 'Contenttree',
  templateUrl: './contenttree.component.html',
  styleUrls: ['./contenttree.component.css'],
  providers: [DynamicDatabase],
})
export class ContenttreeComponent {
  constructor(database: DynamicDatabase) {
    this.treeControl = new FlatTreeControl<DynamicFlatNode>(
      this.getLevel,
      this.isExpandable,
    );
    this.dataSource = new DynamicDataSource(this.treeControl, database);

    this.dataSource.data = database.initialData();
  }

  dataSource: DynamicDataSource;
  treeControl: FlatTreeControl<DynamicFlatNode>;
  getLevel = (node: DynamicFlatNode) => {
    return node.level;
  };
  isExpandable = (node: DynamicFlatNode) => {
    return node.expandable;
  };
  hasChild = (_: number, _nodeData: DynamicFlatNode) => {
    return;
    _nodeData.expandable;
  };
}

这也是我获取数据的一般服务：

import { Injectable } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { map } from 'rxjs/operators';

@Injectable()
export class Service {
  private BaseUrl: string = 'http://example/modul/';
  constructor(private http: Http) {}

  callservice(method: string, serviceUrl: string, body: any) {
    let options = new RequestOptions();
    let URL = this.BaseUrl + serviceUrl;

    if (method == 'post')
      return this.http
        .post(URL, body, options)
        .pipe(map((response: any) => response.json()));
    if (method == 'get')
      return this.http
        .get(URL, options)
        .pipe(map((response: any) => response.json()));
    if (method == 'put')
      return this.http
        .put(URL, body, options)
        .pipe(map((response: any) => response.json()));
  }
}

Answer 1

即使将服务调用放入构造函数中，由于您正在发出异步请求，因此您总是在赌博，是先完成调用还是呈现模板。

将永远无法保证顺序。

如果您不希望在数据出现之前不显示树，请尝试像这样控制它：

<mat-tree *ngIf="dfns">
...
</mat-tree>

或类似这样：

<mat-tree *ngIf="dfns.length">
...
</mat-tree>

等待http呼叫服务以角度7接收数据

1 个答案: