дождитесь, когда служба вызовов http получит данные в формате angular 7

Question

Я хочу связать данные для mat-tree (угловой материал) динамически. но моя проблема в том, что источник данных для дерева не определен до получения реальных данных из службы http, которые я реализовал. Я хочу заполнить (dfns) для связывания в mat-tree, чтобы предотвратить получение для него данных [], я решил поместить (this.GetData) в класс конструктора DynamicDatabase, чтобы получить данные dfns после вызова initialData (), но это не сработало тоже. я могу использовать 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>