динамическое связывание свойств в таблице в угловых 6 - PullRequest
Новая
       18

динамическое связывание свойств в таблице в угловых 6

0 голосов
/ 19 января 2019

Добрый день,

Я начинаю 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
    )
  }

}

parent .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-файле я передаю массив заголовков hardCoded в моем .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 и т. Д.), Этот компонент таблицы не может использоваться везде, это будет зависеть от имен свойств массива, которые я передам в аргумент этого компонента .

Надеюсь, вы понимаете мою проблему и что вы можете поставить меня на правильный путь.

EDIT Вот динамическая таблица после коррекции: 

<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"}
  ]

1 Ответ

0 голосов
/ 20 января 2019

Единственный способ создать правильно динамическую таблицу - это иметь имена столбцов, равные ключам объекта. Затем вы можете зациклить свойства объекта по именам столбцов внутри массива данных. Вот небольшой пример. 

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

И цикл мысли массива таких столбцов. Это зависит от вас. Я надеюсь, вы поймете основную идею.

...