View dạng tree ul trong angular 6

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.

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ử"},
      ]
    },
  ];


}




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!!!

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

1 Like

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?