Angular 7: Как заполнить пользовательский компонент таблицы

Question

У меня есть этот пользовательский компонент таблицы, который мне нужно использовать в другом компоненте:

CustomTable.ts

import { Component, OnInit, Input } from "@angular/core";
import { User } from 'src/app/shared/Models/user.model';

@Component({
  selector: "app-nguserslist",
  templateUrl: "./nguserslist.component.html",
  styleUrls: ["./nguserslist.component.scss"]
})
export class NguserslistComponent implements OnInit {

  @Input() users: User[];

  constructor() {
   }

  ngOnInit() {
   }
}

CustomTable.html:

<div ibmGrid>
    <div ibmRow>
      <div ibmCol [columnNumbers]="{'lg':12}">
          <section class="bx--structured-list">
              <div class="bx--structured-list-thead">
                <div class="bx--structured-list-row bx--structured-list-row--header-row">
                    <div class="bx--structured-list-th">Users</div>
                </div>
              </div>
              <div class="bx--structured-list-tbody">
                      <div class="bx--structured-list-row" *ngFor="let user of users">
                        <tr>
                          <div class="bx--structured-list-td">{{user.UserName}}
                          </div>
                        </tr>
                          <!-- <div class="bx--structured-list-td">{{user.Email}}</div> -->
                      </div>
              </div>
            </section>
      </div>
    </div>
  </div>

IМне нужно использовать эту таблицу в другом компоненте и заполнить ее списком пользователей, полученным в компоненте, где мне нужно использовать этот список.Этот компонент:

userManager.ts:

import { Component, OnInit, Input } from "@angular/core";
import { User } from "src/app/shared/Models/user.model";
import { Profile } from "src/app/shared/Models/profile";
import { UsermanagerService } from "../usermanager.service";
import { ActivatedRoute, Router } from "@angular/router";
import { IfStmt } from "@angular/compiler";

@Component({
  selector: "app-user-manager",
  templateUrl: "./user-manager.component.html",
  styleUrls: ["./user-manager.component.scss"]
})
export class UserManagerComponent implements OnInit {
  @Input() user: User[];
  users: User[];
  http: any;
  profiles: any = {};
  profile: Profile[];

  constructor(
    public actRoute: ActivatedRoute,
    public router: Router,
    private userManagerService: UsermanagerService
  ) {}

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.userManagerService.getUsers().subscribe((data: User[]) => {
      this.users = data;
    });
  }

Метод getUsers() предоставляет список пользователей, которые мне необходимо отобразить с помощью компонента пользовательской таблицы

иесть UserManager.html:

<div class="bx--grid" style="height: 80%;">
  <div class="bx--row border-bottom-internal-layout">
    <div class="bx--col-lg-12 column-padding">
        <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link"
                 [routerLinkActive]="['active']"
                 [routerLink]="['./tracks']">Tracks
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link"
                 [routerLinkActive]="['active']"
                 [routerLink]="['./albums']">Albums
              </a>
            </li>
          </ul>
    </div>
  </div>
  <div class="bx--row" style="height: 100%;">
    <div class="bx--col-lg-3 border-right-internal-layout column-padding">
      // HERE SHOULD GO THE CUSTOM TABLE
    </div>
    <div class="bx--col-lg-9 column-padding">
         <router-outlet></router-outlet>
    </div>
  </div>
</div>

Я уже пытался объявить в UserManager.ts переменную, подобную этой:

userList = new CustomTable(this.users);

, но она не сработала.Как я могу использовать свою собственную таблицу на контроллере UserManager, отображающую список пользователей, который приносит метод GetUsers()?

Большое спасибо.

РЕДАКТИРОВАТЬ: Вот ошибка, полученная с предложенным решением:

Answer 1

Если вы собираетесь использовать стратегию маршрутизации, добавьте компонент к маршрутам и внедрите метод getUsers () в самом компоненте.

Если компонент принимает только массив пользователей и отображает его.

1. Объявление компонента в модуле.
2. Импорт модуля в модуль потребления.
3. Включить селектор в HTML
4. Добавьте ngIf в селектор и передайте входное значение.

      <app-nguserslist *ngIf="users.length > 0" [users]="users" ></app-nguserslist>

UserManager.html:

<div class="bx--grid" style="height: 80%;">
  <div class="bx--row border-bottom-internal-layout">
    <div class="bx--col-lg-12 column-padding">
        <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link"
                 [routerLinkActive]="['active']"
                 [routerLink]="['./tracks']">Tracks
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link"
                 [routerLinkActive]="['active']"
                 [routerLink]="['./albums']">Albums
              </a>
            </li>
          </ul>
    </div>
  </div>
  <div class="bx--row" style="height: 100%;">
    <div class="bx--col-lg-3 border-right-internal-layout column-padding">
      // HERE SHOULD GO THE CUSTOM TABLE
      <app-nguserslist *ngIf="users.length > 0" [users]="users" ></app-nguserslist>
    </div>
    <div class="bx--col-lg-9 column-padding">
         <router-outlet></router-outlet>
    </div>
  </div>
</div>