Нет доступа к списку данных в angular машинописном тексте

Question

Я отправляю запрос на сервер и получаю список данных.

Мне нужно сохранить эти данные в валидном состоянии и использовать их в другой функции этого файла, но когда мне нужно использовать это, он показывает мне пустое list [].

tree:any[]=[];

intialDataa(): any {
    this.claimsManagerService.getAll(this.searchParam).subscribe(data => {
        this.tree = data['records'];
        })
}

Теперь мне нужно использовать эти данные в другой функции:

    openAdd(id, par, title, nodel): void {
    console.log(this.tree)
    }

Но он показывает мне в консоли [].

и когда я консолью tree in InitalData(), он показывает мне следующее:

  (74) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 0
__proto__: Array(0)

В чем проблема? Как я могу использовать tree ????

Изменить: Полный код:

    intialDataa(): any {
    this.searchParam.page = 1;
    this.searchParam.rows = 1000;
    this.loading = true;
    let ddata;
    this.claimsManagerService.getAll(this.searchParam).subscribe(data => {
        this.InitData = data['records'];
        this.tree= data['records'];
        let treeData: FileNode[] = [];
        let queue: FileNode[] = [];
        while (this.InitData.length > 0) {
            let data = this.InitData[0];
            let node = {
                id: data.id,
                title: data.title,
                parentId: data.parentId,
                isChilde: data.isChilde,
                children: []
            };
            queue[node.id] = node;
            if (!data.parentId)
                treeData.push(node);
            else {
                // find parent
                let parent = queue[data.parentId]
                // add to children
                parent.children.push(node);
            }
            this.InitData.splice(0, 1);
        }
        this.rolesToTree(treeData)
    })
    this.tree = ddata;
}

И это вторая функция:

    openAdd(id, par, title, nodel): void {
    console.log(this.tree)
    let cont = true;
    let item = nodel;
    let dialogRef;
    this.openNode.push(this.FindIndexWithParentId(nodel));
    console.log(this.openNode);
    while (cont === true) {
        if (item.parentId !== null) {
            this.openNode.push
                (this.FindIndexWithParentId
                    (this.treeControl.dataNodes.find(x => x.actionId === item.parentId)));
            item = this.treeControl.dataNodes.find(x => x.actionId === item.parentId);
        }
    }
    // this.openNode = this.treeControl.dataNodes.indexOf(nodel);
    if (typeof (id) === 'string') {
        dialogRef = this.dialog.open(ClaimsManagerAddComponent, {
            data: { id: null, isChilde: false, claimName: 'Main' }
        });
    } else {
        dialogRef = this.dialog.open(ClaimsManagerAddComponent, {
            data: { id: id, isChilde: false, claimName: title }
        });
    }

    dialogRef.afterClosed().subscribe(res => {
        if (res) {
            this.intialDataa();
        }
    });
}

HTMl Код:

    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">

  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
      <button mat-icon-button disabled></button>
      <div class="hover">
        <div class="hover-items">
            <div class="label">
                <mat-label>
                  {{node.name}}
                </mat-label>
            </div>
            <div class="iconColor">
                <div class="add">
                    <mat-icon class=" icon-alien" (click)="openAdd(node.actionId,node.parentId,node.name,node)">add_circle_outline</mat-icon>
                </div>
                <div class="edit">
                    <mat-icon class=" icon-alien" [routerLink]="['/claims-manager',node.actionId,'edit']">edit</mat-icon>
                </div>
                <div class="delete">
                    <mat-icon class=" icon-alien" (click)="delete(node.actionId)">delete</mat-icon>
                </div>
            </div>
        </div>
    </div>

  </mat-tree-node>
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
      </button>
      <div class="hover">
        <div class="hover-items">
            <div class="label">
                <mat-label>
                  {{node.name}}
                </mat-label>
            </div>
            <div class="iconColor">
                <div class="add">
                    <mat-icon class=" icon-alien" (click)="openAdd(node.actionId,node.parentId,node.name,node)">add_circle_outline</mat-icon>
                </div>
                <div class="edit">
                    <mat-icon class=" icon-alien" [routerLink]="['/claims-manager',node.actionId,'edit']">edit</mat-icon>
                </div>
                <div class="delete">
                    <mat-icon class=" icon-alien" (click)="delete(node.actionId)">delete</mat-icon>
                </div>
            </div>
        </div>
    </div>
  </mat-tree-node>
</mat-tree>

Answer 1

введите описание изображения здесь

Я думаю, вы переназначили значение для this.tree = ddata

Удалите эту строку this.tree = ddata и попробуйте ...

Answer 2

this.tree переменная назначается асинхронно. Таким образом, к тому времени, когда вы попытаетесь получить к нему доступ в функциях openAdd(), ему все еще не будут присвоены значения. Для быстрого исправления вы можете напрямую вызвать функцию openAdd().

openAdd(id, par, title, nodel): void {
  this.claimsManagerService.getAll(this.searchParam).subscribe(data => {
    this.tree = data['records'];
    console.log(this.tree);
  });
}

Мы могли бы улучшить реализацию, используя многоадресные наблюдаемые, такие как Rx JS BehaviorSubject, но вам нужно показать больше подробности, например, как вызываются функции.