View dạng tree ul trong angular 6

#1

Mình có cái array như hình vẽ anh em nào biết cách view tree html dạng ul giúp mình với.

arr.png1366×768 49.5 KB

#2

hehe, answer myself :slight_smile:
this is component


import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-tree2',
  template: 
  `
    <div class="box2">
      this is hello tree2 component
      <b>View</b><br>
      <ol>
        <li *ngFor="let x of ar" >
          <a href="#{{x.ten}}">{{x.ten}}</a>
          <ol *ngIf=" x.list ">
            <li *ngFor="let y of x.list" >
              <a href="#{{x.ten}}/{{y.ten}}">{{y.ten}}</a>
            </li>
          </ol>
        </li>
      </ol>

    </div>
  `,
  styles:[
    '.box{border:1px solid blue}',
    '.box2{border:1px solid green;padding:5px;margin:5px;}'
  ]
})
export class HelloTree2Component {
  @Input() name: string;
  ten="thuc 101";
  ar=[
    {ten:"Đạo đức"},
    {ten:"Tự nhiên",
      list:[
        {ten:"Toán"},
        {ten:"Lý"},
      ]
    },
    {ten:"Xã hội",
      list:[
        {ten:"Văn"},
        {ten:"Sử"},
      ]
    },
  ];


}
#3

https://plnkr.co/edit/Kypcld?p=preview
hix, kể ra cũng đẹp nhệ, cái này cài thêm xóa sửa trển thì coi như angular 6 nhuyễn nhừ củ từ.
Xem ra không nên tham vọng tree đa cấp, nếu muốn xài thì nên kiếm mấy cái các pro dựng sẵn!!!

#4

Chưa nhuyễn đâu, nếu sâu cấp hơn thì sao

1 Like
#5

hì, làm bài dễ dễ thôi.:yum:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?