web-dev-qa-db-fra.com

NGX-DataTable - colonnes personnalisées avec boutons d'action

J'ai une table ( NGX-DataTable ) dans laquelle je souhaite définir une colonne "Actions" dans laquelle les boutons seront ensuite placés pour des opérations de CRUD.

Créer la colonne et placer les boutons fonctionnés, mais j'ai le problème que la ligne sélectionnée et les valeurs de ses colonnes ne sont plus reconnues à l'intérieur de ma fonction déclenchée.

Voici mon modèle:

<div class="col-12">
  <ngx-datatable
    #table
    class="material"
    [rowHeight]="'auto'"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [limit]="10"
    [rows]="cars?.content"
    [selected]="selected"
    [selectionType]="'multi'">
  </ngx-datatable>
</div>

Voici mon modèle personnalisé avec les boutons:

<ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions">
  <button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

Mon composant (fichier .TS) est structuré comme ceci:

export class MyComponent implements OnInit, OnDestroy {
  @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef<any>;
  columns = [];

  ngOnInit() {
    this.columns = [
    {prop: 'id', name: 'Id'},
    {prop: 'serial_number', name: 'Serial Number'},
    {prop: 'actions', name: 'Actions', cellTemplate: this.buttonsTemplate}
    ];
  }

  // This method should be called after clicking an action button
  onSelect({selected}) {
    console.log('Array of selected vehicles', selected);
  }
}

Actuellement, cette erreur se produit dans la console:

Error TypeError: Impossible de lire la propriété 'Serial_Number' de non définie

Qu'est-ce que je fais mal? La documentation officielle et page de démonstration ne m'a pas aidé ..

Approche de @wentjun (ne fonctionne pas: bouton non visible à l'intérieur de la colonne)

Le gabarit:

<ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
  <ng-template #buttonsTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
    <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  </ng-template>
</ngx-datatable-column>

Le composant (fonction):

onSelect({selected}) {
  console.log('Array of selected vehicles', selected);
}
angularangular-materialngx-datatableviewchildng-template
4
Codehan25

Crédits à @ m4limo

(J'ai ajouté mes propres observations)

Commentaire original

utilisez simplement le ng-tamplate:

<ngx-datatable-column name="Actions" sortable="false" prop="id">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

            <button md-icon-button (click)="blockAgents(value)">
              <i class="fa fa-ban"></i>
            </button>

            <button md-icon-button (click)="approveAgent(value)">
              <i class="fa fa-check"></i>
            </button>

      </ng-template>
</ngx-datatable-column>

value correspond à la propriété prop Vous définissez dans ngx-datatable-column, dans ce cas _ id

Observations

Vous devez déclarer le nom de la colonne à l'intérieur de la propriété prop de la propriété ngx-datatable-column élément, let-value affectera la propriété à une variable, dans ce cas, nommée "valeur", qui sera attribuée/utilisée dans votre ng-template objet enfant.

"Valeur" obtiendra la valeur de la propriété à partir de votre ligne (objet répertorié) à l'aide de la colonne prop valeur. Nom de la colonne [~ # ~] Besoin [~ # ~ ~] Pour correspondre à une propriété de l'objet à la ligne.

Remarques

  • Testé in Angular 9.1.1 (Utilisation de lierre)
  • Utilisation de @ Swimlane/NGX-DataTable 16.0.3

Original GitHub Commentaire ICI

1
KBeDev
<ng-container *ngFor='let column of columns' >
            <ngx-datatable-column *ngIf='column.name === "Actions"' name="Actions" prop="actions">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <span>
                        <button class='btn btn-icon icon-left'>
                            Continue
                            <i [ngClass]='row.actions.continue'></i>
                        </button>
                        <button class='btn btn-icon icon-left'>
                            Remove
                            <i [ngClass]='row.actions.delete'></i>
                        </button>
                    </span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column *ngIf='column.name !== "Actions"' name="{{column.name}}" prop="{{column.prop}}">
            </ngx-datatable-column>
        </ng-container>

La solution de OP Walling fonctionne mieux avec un conteneur NG dans Angular 10+.

1
AGoodnight

Pass row au lieu de $event sur clic.

<ng-template #buttonsTemplate let-row="row" let-value="value">
  <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

et dans la fonction onSelect, vous pourrez accéder aux détails de la ligne.

onSelect(row) { 
  console.log(row); 
}

S'il vous plaît trouver le travail démo

0
Vikash B