如何在 Angular 中创建通用的可重用组件

    <table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>DOB</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of tableItems">
            <td> {{ item.name }}</td>
            <td> {{ item.email } </td>
            <td> {{ item.dob }} </td>
        </tr>
    </tbody>
</table>

    import { Component, Input, OnInit} from '@angular/core';
    import { TableItem } from './model/tableItem';

    @Component({
     selector: 'app-table',
     templateUrl: './table.component.HTML',
     styleUrls: ['./table.component.css'],
    })

    export class TableComponent implements OnInit {
     @Input() tableItems: TableItem[] = [];
   
     constructor() {}

     ngOnInit(): void {}
     }

<table>
  <thead>
    <tr>
      <th *ngFor="let header of data[0] | keyvalue: sortNull">{{ header.key }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let cell of row | keyvalue: sortNull">{{ cell.value }}</td>
    </tr>
  </tbody>
</table>

export class TableComponent {
  @Input() data: any[] = [];

  sortNull() { return 0; }
}

@Component({
  selector: 'app-user-list',
  template: `<app-table [data]="data"></app-table>`
})
export class UserListComponent {

  data = [ 
    { name: 'John', email: 'john@example.com', dob: '2001/01/01' }, 
    { name: 'Jane', email: 'jane@example.com', dob: '2002/02/02' }, 
    { name: 'Kane', email: 'kane@example.com', dob: '2003/03/03' }, 
  ]
}

Angular相关问答推荐

垫-菜单未以17.2.3角显示

Angular 客户端应用程序无法从停靠容器解析后端服务的地址

仅在从forkJoin获得数据后订阅主题

一个接一个的Angular http请求，但只关心第一个

如何在 Angular 中每 x 秒从 REST api 加载数据并更新 UI 而不会闪烁？

当try 关闭浏览器选项卡时显示alert 时，我是否可以捕获用户是否取消警告

我需要取消订阅路由的可观察事件吗

Angular 升级后 RXJS SwitchMap 无法与解析器一起正常工作

VSCode 调试器空白页面并在使用 VS Code 1.76.1 和 Chrome 111 启动时加载

有没有办法订阅部分 BehaviorSubject 值的变化？

在Angular 4中有条件地应用点击事件

react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4

Angular 5 国际化

Observable.forkJoin 和数组参数

错误：您要查找的资源已被删除、名称已更改或暂时不可用

错误：formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令

如何使用依赖注入扩展组件？

Angular 5 响应式表单 - 单选按钮组

如何在Angular中使用带有 td 属性 colspan 的属性绑定？

Angular CLI 为已经存在的组件创建 .spec 文件