Невозможно свернуть / развернуть Дерево Материалов (Угловое 6) - PullRequest
Новая
       32

Невозможно свернуть / развернуть Дерево Материалов (Угловое 6)

0 голосов
/ 15 октября 2018

Я пытаюсь настроить Дерево материалов в своем приложении.Это было довольно сложно по сравнению с таблицей mat.ex., но мне удалось получить данные и показать это.Тем не менее, я просто могу показать все имена, а не раскрывать / сворачивать их детей.Я получаю ошибку 

cannot read property treeControl of undefined

при нажатии на элементы.Я попробовал предложение из другого SO-поста, затем я получил дополнительную ошибку 

cannot read property length of undefined

Как я могу решить эту проблему?Вот код, который у меня сейчас есть:

Overview.component.html 

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{ node.name }}
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
          <mat-icon class="mat-icon-rtl-mirror">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}}
      </div>
      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

Overview.component.scss 

example-tree-invisible {display: none;}

.example-tree ul,
.example-tree li {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
}

Overview.module.ts 

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { OverviewComponent } from './overview.component';
    import { MatTreeModule,
      MatIconModule,
      MatButtonModule } from '@angular/material';


    @NgModule({
      imports: [
        CommonModule,
        MatTreeModule,
        MatIconModule,
        MatButtonModule
      ],
      declarations: [OverviewComponent]
    })
    export class OverviewModule { }

Overview.component.ts 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatTreeNestedDataSource } from '@angular/material';
import { NestedTreeControl } from '@angular/cdk/tree';
import { of as observableOf } from 'rxjs';

export class Group {
  name: string;
}
export class MasterGroup extends Group {
  childGroups: Array<Group>;
}

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent implements OnInit {
  nestedTreeControl: NestedTreeControl<Group>;
  nestedDataSource: MatTreeNestedDataSource<MasterGroup>;



  constructor(private http: HttpClient) {
    this.nestedTreeControl = new NestedTreeControl<Group>(this._getChildren);
    this.nestedDataSource = new MatTreeNestedDataSource();

    this.getGroups();
   }

  ngOnInit() {
  }

  private _getChildren = (node: MasterGroup) => {
     return observableOf(node.childGroups);
  }

   getGroups() {
    const data = [
    {
      name: 'test',
      childGroups: [
        {
          name: 'inner test'
        },
        {
          name: 'inner test 2'
        }
      ]
    },
    {
      name: 'test 2',
      childGroups: [
        {
          name: 'another test'
        }
      ]
    },
    {
      name: 'test 3',
      childGroups: []
    }
  ];

    this.nestedDataSource.data = data;
   }

  hasNestedChild = (_: number, nodeData: MasterGroup) => {
    /*if (nodeData.childGroups) {
      // I get an error using .length here - without it shows all groups
      // When clicking item it gives error 'cannt read property treeControl of undefined'
      return true;
    } else {
      return false;
    } */

    // tried this line from another SO-post, I then get both errors at same time
    return nodeData.childGroups.length;
  }
}

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Добавление другого ответа на случай, если это кому-нибудь поможет.Я тоже столкнулся с этим вопросом.Я использовал дерево в модуле библиотеки, а затем этот модуль был импортирован в мое приложение.Когда я запускал приложение, дерево работало нормально, но когда я обслуживал сам модуль, оно не работало.Мне пришлось изменить target в tsconfig.lib.json с es2015 на es5, чтобы он заработал.

0 голосов
/ 29 декабря 2018

Хорошо, хотя у меня уже был Angular 7 (обновление вручную), у меня была та же проблема.

Чтобы решить ее, я создал новый проект Angular (используя ng new) и убедился, что все версии пакетав package.json совпал с тем из моего проекта.Затем я заменил свой файл tsconfig.json файлом из нового проекта.

Затем все заработало.Я полагаю, что некоторые зависимости, такие как @ angular / cdk, были несовместимы с моим предыдущим tsconfig.json.

Надеюсь, что любой, кто придет сюда, тоже поможет.

...