如何在Angular 7中创建延迟加载Treeview [英] How to create a lazy load treeview in Angular 7

问题描述

我正在使用Angular创建TreeView 并且创建Treeview的场景是我为每个级别使用不同的API，这意味着如果我单击父级别节点之一，则仅子节点应该只为该特定节点生成，依此类推，对于更进一步的级别，每个子节点列表都来自API

I am creating a TreeView using Angular and the scenario of creating treeview is I have different API for each level means if I click on one of the parent level nodes then only child node should generate for that particular node only and so on for further level and every child node list is coming from API

现在的问题是，当我在任何节点上单击时，正在为创建的树视图创建嵌套列表时.一个子节点正在为该节点以及其他节点生成.

Now the issue is when I'm creating a nested list to the created tree view, on the click of any node. A child node is generating for that node and other nodes also.

这是我的代码.

<ul>
    <li *ngFor="let item of companyList" [id]="item.id">
        <span (click)="getLocation(item)">{{item.description}}</span>
      <ul>
          <li *ngFor="let loc of loactionData" [id]="loc.id">
          <span (click)="getDepartment(loc)">{{loc.description}}</span>
          <ul>
            <li *ngFor="let depart of deaprtmentData">
              <span (click)="getEmpStatus(depart)">{{depart.description}}</span>
            </li>
           </ul>
          </li>
    </ul>
  </li>
</ul>

注意:每个列表都来自单独的API，这些click事件有助于调用API.

Note: Every list is coming from separate API and these click event helps to call API.

请提前帮助我解决上述问题.

Please help me with the above issue thanks in advance.

推荐答案

您要为每个嵌套的ul重复相同的嵌套列表. 您必须将嵌套列表与他们的父母相关联..

You are repeating the same nested lists for each nested ul. You have to associate your nested lists to their parents.

由于您的companyList项目和locationData项目具有ID，因此请使用此ID将嵌套列表与每个公司和每个位置相关联.

Since your companyList items and your locationData items have an id, use this id to associate the nested lists to each company and to each location.

要进行关联，请使用简单的对象在代码中创建一个映射，然后使用索引签名键入它.在您的情况下，它将看起来像这样:

To do the association, create a map in your code using a simple object and type it with an index signature. In your case it will look something like this:

companyList: Company[] = [];
locationData: { [companyId: string]: Location[] } = {};
departmentData: { [locationId: string]: Department[] } = {};

然后在模板中，需要使用item.id和loc.id为locationData和departmentData编制索引:

Then in your template, you need to index locationData and departmentData using item.id and loc.id:

<ul>
  <li *ngFor="let item of companyList" [id]="item.id">
    <span (click)="getLocation(item)">{{ item.description }}</span>
    <ul>
      <li *ngFor="let loc of locationData[item.id]" [id]="loc.id">
        <span (click)="getDepartment(loc)">{{ loc.description }}</span>
        <ul>
          <li *ngFor="let depart of departmentData[loc.id]">
            <span (click)="getEmpStatus(depart)">{{ depart.description }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

生成数据时，请将其放置在对象中正确的ID下:

When you generate your data, place it under the right id in the objects:

getLocation(item: Company): void {
  this.http.get<Location[]>(`${this.api}/locations?companyId=${item.id}`).subscribe(locations => {
    this.locationData[item.id] = locations;
  })
}

getDepartment(location: Location): void {
  this.http.get<Department[]>(`${this.api}/departments?locationId=${location.id}`).subscribe(departments => {
    this.departmentData[location.id] = departments;
  })
}

这是一个具有用户/帖子/评论数据模型和jsonplaceholder API的示例.

Here is an example with a User/Post/Comment data model and the jsonplaceholder API.

有关实时示例，请参见此 Stackblitz演示

See this Stackblitz demo for a live example

<ul>
  <li *ngFor="let user of users" [id]="user.id">
    <span (click)="getPosts(user)">{{ user.name }}</span>
    <ul>
      <li *ngFor="let post of posts[user.id]" [id]="post.id">
        <span (click)="getComments(post)">{{ post.title }}</span>
        <ul>
          <li *ngFor="let comment of comments[post.id]">
            <span>{{ comment.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface Comment {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  users: User[] = [];
  posts: { [id: number]: Post[] } = {};
  comments: { [id: number]: Comment[] } = {};

  private api = 'https://jsonplaceholder.typicode.com';

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<User[]>(`${this.api}/users`).subscribe(users => this.users = users);
  }

  getPosts(user: User): void {
    this.http.get<Post[]>(`${this.api}/posts?userId=${user.id}`).subscribe(posts => {
      this.posts[user.id] = posts;
    })
  }

  getComments(post: Post): void {
    this.http.get<Comment[]>(`${this.api}/comments?postId=${post.id}`).subscribe(comments => {
      this.comments[post.id] = comments;
    })
  }
}

这篇关于如何在Angular 7中创建延迟加载Treeview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！