javascript - 如何在angular2中重用表格组件？

Question

我是 Angular2 框架的新手。我正在尝试在整个应用程序中重用单个表组件。当我尝试这样做时，我面临着在我的表格行中重复任何类型的数组的困难。我如何使我的表行迭代作为输入传递给我的表组件的任何类型的数组。

当我将数组作为输入传递给它时，是否可以重用我的表组件？？

以下是我的代码片段。我怎样才能重用它？请建议我最好的方法。

app.component.html

<table>
   <thead>
     <td>name</td>
     <td>empid</td>
   </thead>
   <tbody>
     <tr *ngFor="let item of items;">
     <td>{{item.name}}</td>
     <td>{{item.empid}}</td>
     </tr>
   </tbody>
 </table>

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  items=[{name:"ravi",empid:"10215"},{name:"ravi",empid:"10215"},{name:"ravi",empid:"10215"},{name:"ravi",empid:"10215"},{name:"ravi",empid:"10215"}];
}

Answer 1

对于具有不同结构的类型数组，您可以只创建一个管道并提取值(尽管这确实增加了大约一半的内存占用)

@Pipe({
  name: 'objectValues'
})
export class ObjectValuesPipe implements PipeTransform {
  transform(obj: any) {
    let result = [];
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        result.push(obj[key]);
      }
    }
    return result;
  }
}

这里我们只是从对象中提取值，并将它们返回到一个数组中。

然后在你的 table 上，做

@Component({
  selector: 'my-table',
  template: `
  <table>
   <thead>
     <td *ngFor="let header of headers">{{ header }}</td>
   </thead>
   <tbody>
     <tr *ngFor="let item of items">
       <td *ngFor="let value of item | objectValues">
         {{ value }}
       </td>
     </tr>
   </tbody>
 </table>
  `
})
export class TableComponent {
  @Input() items
  @Input() headers
}

Plunker

另见

• > iterate maps with ng-for用于讨论在 ngFor 中迭代映射和对象。它目前不受支持，因此其他人提出了解决方法。