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中的hardCoded标头数组和直接从数据库中填充的对象数组。

在子组件中，我检索了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'
}

然后循环考虑此类列的数组。这取决于你。希望您能理解主要思想。

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

1 个答案: