问角度6交互式对象递归列表

EN

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

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