Angular泛型动态表格模板类型错误解决方案问询

问题核心 #

添加泛型T后，模板中item[column.column]报错，因为column.column是string类型，而T默认是unknown，无法用string索引未知类型。下面是三种无需关闭严格模式的解决方案：

方案1：给TableHeader添加泛型约束（推荐） #

修改TableHeader接口，让column字段严格对应T的属性键，从根源保证类型匹配：

dynamic-table.model.ts

export interface TableHeader<T> {
  column: keyof T;
  label: string;
}

dynamic-table.component.ts

import { Component, Input } from '@angular/core';
import { TableHeader } from '../../models/dynamic-table.model';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
})
export class DynamicTableComponent<T> {
  @Input() columns: TableHeader<T>[] = [];
  @Input() data: T[] | null = [];
}

模板无需修改，此时column.column的类型是keyof T，可以安全索引item。

方案2：在组件中添加类型安全的取值方法 #

如果不想修改TableHeader接口，可在组件内封装一个方法处理类型断言，模板调用该方法取值：

dynamic-table.component.ts

import { Component, Input } from '@angular/core';
import { TableHeader } from '../../models/dynamic-table.model';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
})
export class DynamicTableComponent<T> {
  @Input() columns: TableHeader[] = [];
  @Input() data: T[] | null = [];

  getItemValue(item: T, columnKey: string): unknown {
    return item[columnKey as keyof T];
  }
}

dynamic-table.component.html

<table class="table table-bordered">
    <thead>
        <tr>
            <th *ngFor="let column of columns" scope="col">{{column.label}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of data">
            <td *ngFor="let column of columns">{{getItemValue(item, column.column)}}</td>
        </tr>
        <tr *ngIf="data && data.length <= 0">
            <td [attr.colspan]="columns.length">* No valid treatments results were found.</td>
        </tr>
    </tbody>
</table>

方案3：给泛型T添加索引签名约束 #

通过约束T必须包含字符串索引签名，允许用string类型索引：

dynamic-table.component.ts

import { Component, Input } from '@angular/core';
import { TableHeader } from '../../models/dynamic-table.model';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
})
export class DynamicTableComponent<T extends Record<string, unknown>> {
  @Input() columns: TableHeader[] = [];
  @Input() data: T[] | null = [];
}

模板无需修改，此时T被限制为可通过string索引的类型，item[column.column]合法。

内容的提问来源于stack exchange，提问作者Kumbirai Benjamin Deve