Angular 8中如何将表格行内容直接渲染在<tr>标签内？

背景 #

我正在开发一款Angular 8应用，其中employee-list组件通过表格展示数据。

employee-list.component.ts 代码 #

import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
import * as data from '../../data/employees';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css'],
})
export class EmployeeListComponent {
  public displayMode: String = 'grid';
  public deptno: number = -1;
  public empsArray: Employee[] = data.employees;

  public removeEmployee(empno: number) {
    this.empsArray = this.empsArray.filter((item) => item.empno != empno);
  }

  public filterByDepartment(num: number) {
    this.deptno = num;
  }

  public setDisplayMode(mode: String) {
    this.displayMode = mode;
  }
}

父组件视图代码 #

<div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Full Name</th>
          <th>Job</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of empsArray | filter: deptno">
          <app-employee-table-item
            [employee]="employee"
          ></app-employee-table-item>
        </tr>
      </tbody>
    </table>
  </div>

employee-table-item 子组件代码 #

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Employee } from '../../models/empModel';

@Component({
  selector: 'app-employee-table-item',
  templateUrl: './employee-table-item.component.html',
  styleUrls: ['./employee-table-item.component.css'],
})
export class EmployeeTableItemComponent {
  @Input() employee: Employee;
}

问题 #

表格显示异常，原因是每个表格行的内容被包裹在<app-employee-table-item></app-employee-table-item>元素中。我希望将每个表格行的内容直接显示在<tr>标签内，同时保留独立的HTML模板文件。

疑问 #

实现将表格行内容直接显示在<tr>标签内的最可靠方式是什么？

解决方案 #

核心思路 #

HTML表格对DOM结构要求严格，<tr>内部只能直接包含<td>/<th>元素，自定义组件标签会破坏表格结构导致显示异常。通过属性型组件选择器，可以让Angular直接将子组件的模板内容插入到<tr>内部，不额外添加包裹元素，既保留组件独立性，又符合表格结构规范。

步骤1：修改子组件选择器类型 #

将employee-table-item.component.ts中的组件选择器改为属性型选择器：

@Component({
  selector: '[app-employee-table-item]', // 改为属性选择器，用方括号包裹
  templateUrl: './employee-table-item.component.html',
  styleUrls: ['./employee-table-item.component.css'],
})
export class EmployeeTableItemComponent {
  @Input() employee: Employee;
  // 如需触发父组件事件，添加Output
  @Output() delete = new EventEmitter<number>();

  onDelete() {
    this.delete.emit(this.employee.empno);
  }
}

步骤2：调整父组件视图代码 #

在父组件的<tr>上直接应用该属性选择器，并绑定输入/输出属性：

<div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Full Name</th>
          <th>Job</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          *ngFor="let employee of empsArray | filter: deptno"
          app-employee-table-item
          [employee]="employee"
          (delete)="removeEmployee($event)"
        ></tr>
      </tbody>
    </table>
  </div>

步骤3：优化子组件模板 #

确保employee-table-item.component.html中只有<td>元素，无外层包裹标签：

<td>{{ employee.fullName }}</td>
<td>{{ employee.job }}</td>
<td>
  <button (click)="onDelete()">删除员工</button>
</td>

内容的提问来源于stack exchange，提问作者Razvan Zamfir