網站搜尋

javascript - Angular 樹狀元件無法運作


我安裝並導入了 Angular 樹元件,並嘗試按照 https://angular2-tree.readme.io/ 中提供的步驟,使用提供的基本範例進行設置。

但不幸的是,我只能看到根節點,且無法展開。發佈程式碼後,有人能一眼看出有什麼錯嗎?請幫我理解這個錯誤,我顯然無法自己看出來。

模組:

import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-component';

@NgModule({
  imports: [
    TreeModule
  ],
  declarations: [],
  providers: []
})
export class CourseCreationModule { }

元件:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit {
  tree: any;

  constructor() { }

  getCourseDetails() {
      this.createLessonTree();
  }

  createLessonTree() {
    this.tree = [
      {
        id: 1,
        name: 'root1',
        children: [
          { 
            id: 2, 
            name: 'child1'
          },
          { id: 3, 
            name: 'child2'
          }
        ]
      },
      {
        id: 4,
        name: 'root2',
        children: [
          { id: 5, name: 'child2.1' },
          {
            id: 6,
            name: 'child2.2',
            children: [
              { id: 7, name: 'subsub' }
            ]
          }
        ]
      }
    ];
  }

ngOnInit() {
this.route.params.subscribe(params => {
  this.courseId = params['id'];
  this.getCourseDetails();
});
}

HTML:

<tree-root [nodes]="tree"></tree-root>

相信沒有語法錯誤,因為我可以看到 root1 和 root2。

謝謝你。

答案#1

已將 @import '~angular-tree-component/dist/angular-tree-component.css'; 添加到 src/styles.css 文件,並且可正常運作。

答案#2

我相信你需要在你的建構函數中或在 ngOnInit() 中呼叫 getCourseDetails(),這應該按照類別宣告所述來實作。