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
}

Plunker

另见

iterate maps with 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>

如何在angular2中重用表组件？

3 个答案:

Plunker