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上声明这样的变量：

userList = new CustomTable(this.users);

但是没有用。如何在呈现GetUsers()方法带来的usersList的UserManager控制器上使用我的自定义表？

非常感谢。

编辑：这是提出的解决方案的错误：

Answer 1

如果要使用路由策略，则将组件添加到路由并在组件本身内实现getUsers（）方法。

如果组件仅采用用户数组并进行呈现。

在模块中声明组件。
将该模块导入使用模块。
在HTML中包含选择器
将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>

Angular 7：如何填充自定义表组件

1 个答案: