Discussion :

[jonor]

Bonjour à tous,

Je suis nouveau sur angular et je cherche à manipuler des tableaux de données pouvant être modifiable.
Notamment, je cherche à créer une colonne ID qui ne serait jamais affichée sur ma page mais serait disponible sur mon code pour me permettre de manipuler plus facilement mes données.
J'ai essayé ce code qui permet en sélectionnant une checkbox de dissimuler une colonne comme sur cet exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { Component } from '@angular/core';
 
@Component({
  selector: 'column-hidden',
  template: `
      <div style='float:left;width:75%'>
        <ngx-datatable
          class='material'
          [rows]='rows'
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'">
          <ngx-datatable-column 
            *ngFor="let col of columns" 
            [name]="col.name">
          </ngx-datatable-column>
        </ngx-datatable>
      </div>
      <div class='selected-column'>
        <h4>Available Columns</h4>
        <ul>
          <li *ngFor='let col of allColumns'>
            <input
              type='checkbox'
              [id]="col.name"
              (click)='toggle(col)'
              [checked]='isChecked(col)'
            />
            <label [attr.for]="col.name">{{col.name}}</label>
          </li>
        </ul>
      </div>
  `
})
export class ColumnToggleComponent {
 
  rows = [
    {
      name: 'Claudine Neal',
      gender: 'female',
      company: 'Sealoud'
    },
    {
      name: 'Beryl Rice',
      gender: 'female',
      company: 'Velity'
    }
  ];
 
  columns = [
    { name: 'Name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
 
  allColumns = [
    { name: 'Name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
 
  toggle(col) {
    const isChecked = this.isChecked(col);
 
    if(isChecked) {
      this.columns = this.columns.filter(c => { 
        return c.name !== col.name; 
      });
    } else {
      this.columns = [...this.columns, col];
    }
  }
 
  isChecked(col) {
    return this.columns.find(c => {
      return c.name === col.name;
    });
  }
 
}

Mais je n'arrive pas à modifier ce code pour par exemple laisser cacher la colonne name tout le temps sans faire apparaître la checkbox...

[Jimmy_]

Bonjour,

C'est l'exemple de base du site ngx datatable.

Le code est ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<li *ngFor='let col of allColumns'>
            <input
              type='checkbox'
              [id]="col.name"
              (click)='toggle(col)'
              [checked]='isChecked(col)'
            />
            <label [attr.for]="col.name">{{col.name}}</label>
          </li>

La solution :

Dans la boucle ngFor tu peux conditionner la balise input avec un ngIf qui va tester le nom de la colonne et ne pas l'afficher si elle s'appelle 'name'.