Question

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

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

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

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

中

strom.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>

Answer 1

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

您可以看到一个用户列表。单击用户后，它将进行API调用以获取用户的帖子。在您的情况下，它将调用userService.getUsersID。考虑到您的情况，将userPosts称为podrizeni。

此外，为了简洁起见，我在AppComponent中完成了所有操作。就您而言，应该是您已经实现的。

此外，您应该为“下属用户列表”创建一个单独的组件。那应该接受一个userId。调用userService.getUsersID(userId)的责任应该属于“下级用户列表”组件，而不是此父用户列表组件。

Angular 6交互式递归对象列表

1 个答案: