無法訪問 angular typescript 中的數據列表

Question

我向服務器發送請求並獲取數據列表。

我需要將這些數據保存為有效數據並在該文件的其他 function 中使用，但是當我需要使用它時，它會顯示空列表[] 。

tree:any[]=[];

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

現在我需要在其他 function 中使用這些數據：

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

但它在控制台中向我展示了[] 。

當我在InitalData()中控制台tree時，它會告訴我：

  (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;
}

這是第二個 function：

    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變量是異步分配的。 因此，當您嘗試在openAdd()函數中訪問它時，它仍然沒有被賦值。 為了快速修復，您可以直接在openAdd() function 中進行調用。

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

我們可以使用諸如 RxJS BehaviorSubject之類的多播 observable 來改進實現，但是您需要顯示更多細節，例如如何調用函數。

Answer 2

我認為您已經重新分配了this.tree = ddata的值

刪除此行this.tree = ddata並嘗試...