Angular自定义表格：如何创建含label属性约束的TableItem类型

要确保传入自定义表格的任意对象都具备label属性，用TypeScript的泛型约束就能搞定，直接在表格组件里做类型限制即可，具体步骤如下：

1. 给组件添加泛型约束
   在你的MyTableComponent中，给组件声明泛型参数，约束该泛型必须包含label属性，再把输入的items类型设为该泛型的数组：

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-my-table',
     templateUrl: './my-table.component.html',
     styleUrls: ['./my-table.component.css']
   })
   export class MyTableComponent<T extends { label: string }> {
     @Input() items!: T[];
   }
   

2. 模板中安全访问label属性
   因为已经通过类型约束确保了每个item都有label，模板里可以直接放心使用：

   <table>
     <thead>
       <tr>
         <th>标签</th>
         <!-- 其他表头按需添加 -->
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let item of items">
         <td>{{ item.label }}</td>
         <!-- 还能渲染该类型的其他属性，比如item.id、item.price等 -->
       </tr>
     </tbody>
   </table>
   

3. 实际使用示例
   不管你传入的是哪种对象，只要它包含label属性，TypeScript就会通过类型检查，比如：

   // 自定义业务类型
   interface Product {
     label: string;
     price: number;
     stock: number;
   }
   
   // 父组件中的数据
   items: Product[] = [
     { label: '笔记本电脑', price: 5999, stock: 10 },
     { label: '无线鼠标', price: 99, stock: 50 }
   ];
   

   然后在父组件模板中正常调用：

   <app-my-table [items]="items"></app-my-table>
   

如果你的场景中label不一定是字符串类型，也可以把约束改成T extends { label: any }，不过大多数业务场景下用string就足够了。

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