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

そのテーブルを別のコンポーネントで使用し、このリストを使用する必要があるコンポーネントで取得したユーザーリストを入力する必要があります。そのコンポーネントは次のとおりです。

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ように a 変数で宣言しようとしました:

userList = new CustomTable(this.users);

しかし、うまくいきませんでした。GetUsers()メソッドがもたらすusersList をレンダリングする UserManager コントローラーでカスタム テーブルを使用するにはどうすればよいですか?

どうもありがとう。

編集:提案されたソリューションで得られたエラーは次のとおりです。