[英]How to create a lazy load treeview in Angular 7
我正在使用Angular創建一個TreeView,並且創建treeview的場景是我對每個級別都有不同的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
重復相同的嵌套列表。 您必須將嵌套列表與其父項關聯 。
由於您的companyList項目和您的locationData項目具有ID,因此請使用此ID將嵌套列表與每個公司和每個位置相關聯。
要進行關聯,請使用簡單對象在代碼中創建一個映射,並使用索引簽名鍵入它。 在你的情況下,它看起來像這樣:
companyList: Company[] = [];
locationData: { [companyId: string]: Location[] } = {};
departmentData: { [locationId: string]: Department[] } = {};
然后在模板中,您需要使用item.id
和loc.id
索引locationData
和departmentData
:
<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下:
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;
})
}
以下是User / Post / Comment數據模型和
jsonplaceholder
API的jsonplaceholder
。有關實例,請參閱此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;
})
}
}
您可以通過列表中的父級索引跟蹤不同的數據集(如果項目從列表中刪除並且索引更改,則會優先使用id)
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.