如何在角9中实现可树性？

Question

我想用角9实现一个树表。我正在尝试，但我做不到。有人能帮我实现角9的树表吗？

app.component.ts

import { Component, OnInit, AfterViewInit  } from '@angular/core';
import * as $ from 'jquery';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  ngAfterViewInit(): void {

    (<any>$)( document ).ready(function() {
      (<any>$)('.tree').treegrid({
      'initialState': 'collapsed',
      'saveState': true,
      expanderExpandedClass: 'fa fa-minus',
      expanderCollapsedClass: 'fa fa-plus'
      });
  });   

  }
  ngOnInit(): void {

  }
  title = 'jquery-treetable';
}

app.component.html

<table class="tree">
    <tr class="treegrid-1">
        <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
        <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
        <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
        <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
</table>

风格与JS文件

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/jquery-treegrid/css/jquery.treegrid.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery-treegrid/js/jquery.cookie.js",
              "node_modules/jquery-treegrid/js/jquery.treegrid.min.js",
              "node_modules/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"
            ]

输出

Root node   Additional info
Node 1-1    Additional info
Node 1-2    Additional info
Node 1-2-1  Additional info

错误显示在控制台中

​

​

Answer 1

您可以在WAI创作实践中找到树的典型需求和可访问性考虑。

在我看来，如果您是为了商业软件，我强烈建议使用第三方组件的。

如果目的是教育-首先获得一些角度，TypeScript，CSS和HTML知识。