【问题标题】:Angular Tree component not working角树组件不工作
【发布时间】:2021-07-14 22:48:15
【问题描述】:

我安装并导入了 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。

谢谢。

【问题讨论】:

标签: javascript angular typescript angular-tree-component


【解决方案1】:

将@import '~angular-tree-component/dist/angular-tree-component.css'; 添加到src/styles.css 文件并正常工作。

【讨论】:

  • 或者你可以将它添加到你的 angular.json 样式属性 "styles": ["./node_modules/angular-tree-component/dist/angular-tree-component.css","src/样式.css"]
【解决方案2】:

我相信你需要在你的构造函数或ngOnInit() 中调用getCourseDetails(),这应该按照类声明的状态来实现。

【讨论】:

  • 调用函数不是必需的。正如我所说,语法可能不是问题,因为正在调用树组件并且我可以看到正在显示的根节点。问题是没有附加孩子。
  • 不调用构造函数为什么会看到呢?
  • 抱歉,我从 ngOnInit 调用了我没有在代码中添加的代码。
  • 此问题的任何解决方案!我也面临同样的情况
  • @NIrav Modi,查看stackoverflow.com/questions/47642137/… 上的解决方案我必须将@import '~angular-tree-component/dist/angular-tree-component.css'; 包含到我的 src/styles.css 文件中才能使其工作。
【解决方案3】:

如果迁移到@circlon/angular-tree-component 后出现此问题,您应该在src/styles.css 中使用@import '~@circlon/angular-tree-component/css/angular-tree-component.css'。 另见:changelog

【讨论】:

    猜你喜欢
    • 2019-09-15
    • 2018-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-26
    相关资源
    最近更新 更多