web-dev-qa-db-fra.com

Angular 2 sur la cellule de table de clic la rend modifiable

J'ai un ngFor pour les lignes et je fais quoi quand je clique sur une cellule pour la rendre modifiable

<tr *ngFor="let invoice of invoiceItem.rows">
    <td contenteditable='true' (input)="onRowClick($event, invoice.rowId)">{{ invoice.rowName }}</td>
    <td>{{ invoice.hours}}</td>
    <td>{{ invoice.price }}</td>
    <td>{{ invoice.comments }}</td>
    <td>{{ invoice.total}} </td>


</tr>

plus sur ce que je supporter avec de nouvelles lignes ajoutées

<button (click)='addRow()'>Add a row</button>



 addRow() {
        this.invoiceItem.rows.Push({
            invoiceDetailsId: this.invoiceItem.item.invoiceId,
            rowName: '',
            hours: 0,
            price: 0,
            comments: '',
            total: 0,
            rowId: 
        }) 
    }
    onRowClick(event, id) {
        console.log(event.target.outerText, id);
    }

que dois-je mettre en œuvre pour cette tâche?

htmlangulartypescript
3
shaharnakash

Voici une solution qui fonctionne. Ce n'est peut-être pas joli, mais ça marche.

Changez la structure de votre table en quelque chose comme ceci:

<tr *ngFor="let invoice of invoiceItem.rows">
    <td *ngIf="invoice.rowId == editRowId"> 
       <input type="text" [(ngModel)]="invoice.hours">
    </td>
    <td *ngIf="invoice.rowId !== editRowId" (click)="toggle(invoice.rowId)">
       {{invoice.rowId}}
    </td>
    <!-- the rest of your fields in same manner -->
</tr>

Et dans votre composant:

editRowId: any;

toggle(id){
  this.editRowId = id;
}

Cela prend également en charge l’ajout d’une nouvelle ligne. Je suis venu avec un bidouillage pour définir l'identifiant pour la nouvelle ligne, comme suit:

addRow() {
  let indexForId = this.invoiceItem.rows.length + 1
  this.rows.Push({
    // .....
    rowId: indexForId,
  })
}

Vous pourriez trouver un meilleur moyen :)

Voici un travailplunker

7
AJT_82

ok, vous allez d’abord ajouter une propriété supplémentaire pour chaque invoice appelée editable: false, puis lors de la lecture en boucle de la liste, vous lierez des données comme ceci;

[contenteditable]="invoice.editable"

faire ceci pour tout td

<td (input)="onRowClick($event, invoice.rowId)">
    <div [contenteditable]="invoice.editable ? 'true': 'false'">{{ invoice.rowName }}</div>
</td>
0
Tiep Phan