角度 6 中表格中的动态属性绑定

Question

下午好，

我开始使用 Angular。我想制作一张我希望在我的应用程序的许多位置使用的表。

此表将是许多父组件的子组件，因此我希望这些组件将表头数组和行数组传递给表。

这里是一个父 ts 的例子：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { PrestationService } from '../services/prestation.service';

@Component({
  selector: 'app-prestation',
  templateUrl: './prestation.component.html',
  styleUrls: ['./prestation.component.css']
})
export class PrestationComponent implements OnInit {

  constructor(private fb:FormBuilder, private prestationService:PrestationService) { }

  TITLE:String = "Créer une prestation"
  headers = ['libelle', 'Montant', 'Valable jusqu\'au']
  prestations;
  form:FormGroup;
  msg;

  ngOnInit() {
    this.loadPrestations();
    this.form = this.fb.group({
      libelle:'',
      montant:'',
      date_validite: new Date()
    })
  }

  addPrestation(data){
    this.prestationService.add(data).subscribe(
      data => this.msg = data,
      err => this.msg = err
    )
    this.loadPrestations();
  }

  loadPrestations(){
    this.prestationService.getPrestations().subscribe(
      data => this.prestations = data,
      err => this.msg  = err
    )
  }

}

父.html（减去不必要的信息）

<div class="container tbl-borders spacer">
    <app-view-title [title]="this.TITLE"></app-view-title>
    <app-view-table [headers]="this.headers" [rows]="this.prestations"></app-view-table>

在 html 内容中，我传递了我的 .ts 中硬编码的标头数组和直接从我的数据库填充的对象数组。

在子组件中，我检索了 2 个表，但我被卡住了。我在互联网上四处寻找解决方案，但没有一个符合我最终期望的解决方案。

这是子组件.ts：

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

@Component({
  selector: 'app-view-table',
  templateUrl: './view-table.component.html',
  styleUrls: ['./view-table.component.css']
})
export class ViewTableComponent {

  private _headers:String[];
  private _rows:Array<Object>;

  @Input()
  set headers(headers:String[]){
    this._headers = headers
  }

  @Input()
  set rows(rows:Array<Object>){
    this._rows = rows;
  }

  get headers(){return this._headers}
  get rows(){return this._rows};

}

和 html ：

<table class="table table-stripped table-hover table-sm">
  <thead >
    <th *ngFor="let header of headers">{{header}}</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows, i as index">
      <td>{{row.libelle}}</td>
      <td>{{row.montant}}</td>
      <td>{{row.date_validite}}</td>
      <td>
        <div class="row">
        <button class="btn btn-outline-success btn-sm ">edit</button>
        <button class="btn btn-outline-success btn-sm ">Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

表标题按预期工作，但行没有，我尝试使用键值管道，但数据无序，不适合正确的列标题。上面的 html 是不正确的，因为如果我必须明确命名每个属性（例如 libelle、montant 等），则此表组件不能在任何地方使用，它将取决于我将传递给该组件参数的数组属性名称.

希望您能理解我的问题，并希望您能正确引导我。

编辑 这是修正后的动态表：

<table class="table table-stripped table-hover table-sm">
  <thead >
    <th *ngFor="let header of headers">{{header.titreColonne}}</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let header of headers">
        {{row[header.key]}}
      </td>
      <div class="col-sm-4 row">
          <button class="btn btn-outline-success btn-sm " *ngFor="let button of buttons" (click)="buttonEvent(button, row.id)">{{button}}</button>
       </div>
    </tr>
  </tbody>
</table>

我修改了我的头数组

 headers = [
    {titreColonne:"Libellé", key:"libelle"},
    {titreColonne:"Montant € HT", key:"montant"},
    {titreColonne:"Date Fin validité", key:"dateFinValidite"}
  ]

Answer 1

制作正确的动态表的唯一方法是让列名等于对象的键。然后，您可以通过数据数组中的列名循环对象属性。这是一个小例子。

    <table>
      <thead>
        <tr>
          <th *ngFor="let col of data.ColumnNames">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
      <tr *ngFor="let row of data.Rows">
        <td *ngFor="let col of data.ColumnNames">
          {{ row.Cells[col].Data }}
        </td>
      </tr>
      </tbody>
    </table>

当然，您可以使列名复杂化并获得类似以下的对象：

{
 columnName: 'Valid Date',
 dataKey: 'date_validite'
}

并循环考虑此类列的数组。这取决于你。我希望你能抓住主要思想。