时间戳

首页 > 解决方案 > Angular 6交互式递归对象列表

angular - Angular 6交互式递归对象列表

问题描述

我正在尝试在递归列表中显示用户结构，并能够显示有关其中任何一个的信息

到目前为止，我已经设法正确显示它们，但似乎无法使其能够显示最高级别的任何其他信息（无论我点击哪个，它总是显示有关管理员的信息）

getUsersID(number) 返回包含单个用户的列表（在这种情况下 admin id 1 是最高用户）

并且用户模型的所有下属都存储在podrizeni: User[];

斯特罗姆.ts：

import { Component, OnInit, Input } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../models/user';

@Component({
  selector: 'app-strom',
  templateUrl: './strom.component.html',
  styleUrls: ['./strom.component.css']
})
export class StromComponent implements OnInit {
  //@Input () users: User [];
  users: User[];
  user: User;
  selectedUser: User;
  constructor(
    private userService: UserService  
  ) { }

  ngOnInit() {
    this.getUsers().subscribe(users => {

      this.users = users;
      this.users.forEach(user => {
        console.log(user);
      });
    });
  }

  getUsers() {
   return this.userService.getUsersID(1)

  }
  onSelect(user: User): void {
    this.selectedUser = user;
  }
}

strom.html：

<ul>
  <ng-template #recursiveList let-users>

    <li *ngFor="let user of users" [class.selected]="user === selectedUser" (click)="onSelect(user)">
          {{user.username}}
          <ul *ngIf="user.podrizeni">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: user.podrizeni}"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users }"></ng-container>
</ul>

<div *ngIf="selectedUser">

  <h2>{{selectedUser.username | uppercase}} Details</h2>
  <div>
    <span>id: </span>{{selectedUser.id}}</div>
  <div>
    <label>name: {{selectedUser.username}}
    </label>
  </div>
</div>

标签： angularlist

解决方案

看看我为您创建的这个示例StackBlitz 项目。让我知道这是否是您想要实现的。

You can see a users list. Once you click on a user, it makes an API call to get the users' posts. In your case, it would call userService.getUsersID. Consider userPosts as podrizeni for your case.

Also, I've done everything in the AppComponent for the sake of brevity. In your case, it should be as you've implemented it.

Plus, you should create a separate component for Subordinate Users List. That should accept a userId. And the responsibility to call the userService.getUsersID(userId) should be of the Subordinate Users List component and not this parent users list component.

推荐阅读