如何重用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>

app.component.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;
  }
}

在这里，我们只是从对象中提取值，然后将它们返回到数组中。

然后在你的桌子上，做

@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
}

柱塞

也可以看看

• 使用ng-for迭代地图，以讨论ngFor迭代地图和对象。 当前不支持它，因此其他人提出了解决方法。

Answer 2

是的，您可以将表做成可重用的表组件：

table.component.ts

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  @Input() items;
  @Input() field1;
  @Input() field2;

  constructor() {
  }

}

table.component.html

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

app.component.html

<app-table [items]="data" [field1]="field1" [field2]="field2"></app-table>

app.component.ts

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

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

    export class AppComponent{
           // data: any[] = [{name: "ravi", empid: "10215"}, {name: "ravi", empid: "10215"}];
  // field1: string = 'name';
  // field2: string = 'empid';

  field1: string = 'product';
  field2: string = 'price';
  data = [
    {product: "mobile", price: "10215"},
    {product: "camera", price: "10215"}
  ];



      constructor() { }

      ngOnInit() {
      }

    }

Answer 3

this.keys = Object.keys(this.data);

<tr *ngFor="let row of data">
  <td *ngFor="let key of keys">
       {{ row[key] }}
 </td>
</tr>