Блог

Я создаю древовидное представление с помощью Angular, и сценарий создания древовидного представления заключается в том, что у меня разные API для каждого уровня, что означает, что если я нажму на один из узлов родительского уровня, то только дочерний узел должен генерироваться только для этого конкретного узла и так далее для дальнейшего уровня, и список всех дочерних узлов поступает из API

Теперь проблема заключается в том, что я создаю вложенный список в созданное древовидное представление по щелчку любого узла. Дочерний узел генерируется для этого узла, а также для других узлов.

Вот мой код.

 <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, и это событие щелчка помогает вызвать API.

Пожалуйста, помогите мне с вышеуказанной проблемой, заранее спасибо.

Вы повторяете одни и те же вложенные списки для каждого вложенного ul . Вы должны связать свои вложенные списки с их родителями.

Поскольку элементы списка компаний и элементы locationData имеют идентификатор, используйте этот идентификатор, чтобы связать вложенные списки с каждой компанией и с каждым местоположением.

Чтобы выполнить ассоциацию, создайте map в своем коде, используя простой объект, и введите его с индексной подписью. В вашем случае это будет выглядеть примерно так:

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

Затем в вашем шаблоне вам нужно проиндексировать locationData и departmentData с помощью item.id и 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>
  

Когда вы создаете свои данные, поместите их под правильным идентификатором в 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.

Смотрите эту демонстрацию Stackblitz для живого примера

 <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;
    })
  }
}
  

Вы могли бы отслеживать различные наборы данных по индексу их родительского элемента в списке (идентификатор был бы предпочтительнее, например, на случай, если элемент будет удален из списка и индексы изменятся)

 public locationData = {};

load locationData(item, index):

this.locationData[index] = getDataForItem(item);
  

….

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

                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>