web-dev-qa-db-fra.com

Comment sélectionner une ligne dans Angular 5

Je suis verrryyyyy nouveau sur Angular, alors comprenez-moi s'il vous plaît :)

J'ai une liste d'utilisateurs, qui sont affichés comme ceci:

enter image description here

Voici mon HTML:

MODIFIER - BOUTONS CRUD AJOUTÉS: 

  <!--Add new button-->
  <button type="button" (click)="AddModal.show()">
  </button>

  <button type="button" (click)="EditModal.show()">
  </button>

  <button type="button" (click)="DeleteModal.show()">
  </button>

</div>
<!--Data Tableq which displays users info-->
<div class="dash-table-container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>
          Name
          <i class="fas fa-sort-amount-down sorting-icon"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon" style="display: none;"></i>
        </th>
        <th>
          Position
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Office
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Age
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Salary
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
    </thead>
    <!--<tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>-->
    <tbody>
      <tr *ngFor="let u of users; let i=index;">
        <td>{{u.Name}}</td>
        <td>{{u.Position}}</td>
        <td>{{u.Office}}</td>
        <td>{{u.Age}}</td>
        <td>{{u.StartDate}}</td>
        <td>{{u.Salary}}</td>
      </tr> 
    </tbody>
  </table>
</div>
<app-product-new #AddModal></app-group-new>

<app-product-edit #EditModal></app-group-edit>

<product-dialog #DeleteModal></touch-dialog>

Je me demande comment pourrais-je sélectionner une ligne de ce tableau en utilisant angulaire? J'en ai besoin parce que je veux envoyer les données de cette ligne sélectionnée à un modal pour les éditer.

MODIFIER:

Donc, fondamentalement, lorsque je sélectionne une ligne et que je clique sur un modal EDIT, je voudrais savoir quelle ligne est sélectionnée afin de pouvoir remplir les données du modal avec ces informations et les enregistrer/modifier.

Merci

Merci les gars! À votre santé

angulartwitter-bootstrapdata-bindingdatatablesselection
4
billy_56

En supposant que vous vouliez cela pour modifier ou quelque chose, j'ai ajouté ci-dessous un bouton avec chaque ligne sur laquelle vous obtiendrez une ligne complète.

  <tbody>
          <tr *ngFor="let u of users; let i=index;">
            <td>{{u.Name}}</td>
            <td>{{u.Position}}</td>
            <td>{{u.Office}}</td>
            <td>{{u.Age}}</td>
            <td>{{u.StartDate}}</td>
            <td>{{u.Salary}}</td>
            <td> <input type="button" value="Edit" (click)="RowSelected(u)"/></td>
          </tr> 
        </tbody>

RowSelected(u:any){
console.log(u);
}

Mise à jour:

Si vous ne voulez pas de bouton sur chaque ligne et obtenez les données de la ligne sélectionnée en cliquant simplement sur la ligne, voici le code.

<tbody>
          <tr *ngFor="let u of users; let i=index;" (click)="RowSelected(u);">
            <td>{{u.Name}}</td>
            <td>{{u.Position}}</td>
            <td>{{u.Office}}</td>
            <td>{{u.Age}}</td>
            <td>{{u.StartDate}}</td>
            <td>{{u.Salary}}</td>
            </td>
          </tr> 
        </tbody>

Pour modifier en question:

Après le code ci-dessus en html, dans votre composant.

RowSelected(u:any){
this.selectedUser=u;   // declare variable in component.
}

Encore une fois dans votre modal.

<modal>
<input type="text" [(ngModel)]="selectedUser.Name" />
<input type="text" ([ngModel)]="selectedUser.Position" />
...
...
</modal>
7
Dheeraj Kumar
    You can try this following source code
    **app.component.ts**
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent {
    users = [
        {Name: 'karthi', Position: 'Developer', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 2000, flag: false},
        {Name: 'arun', Position: 'Tester', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 5000, flag: false},
        {Name: 'mani', Position: 'Software analyst', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 6000, flag: false},
        {Name: 'viay', Position: 'Developer', Office: 'a2z', Age: 29, StartDate: '11Nov2018', Salary: 21000, flag: false},
    ];
    public selectUsers(event: any, user: any) {
       user.flag = !user.flag;
      }

    }

    **app.component.html**
    <!--Data Tableq which displays users info-->
    <div class="dash-table-container">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>
              Name
              <i class="fas fa-sort-amount-down sorting-icon"></i>
              <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort sorting-icon" style="display: none;"></i>
            </th>
            <th>
              Position
              <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort sorting-icon-default"></i>
            </th>
            <th>
             Office
              <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort sorting-icon-default"></i>
            </th>
            <th>
             Age
              <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort sorting-icon-default"></i>
            </th>
            <th>
             Salary
              <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
              <i class="fas fa-sort sorting-icon-default"></i>
            </th>
        </thead>
        <!--<tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>-->
        <tbody>
          <tr *ngFor="let u of users; let i=index;" (click)="selectUsers($event, u);" [class.selected]="u.flag === true">
            <td>{{u.Name}}</td>
            <td>{{u.Position}}</td>
            <td>{{u.Office}}</td>
            <td>{{u.Age}}</td>
            <td>{{u.StartDate}}</td>
            <td>{{u.Salary}}</td>
          </tr> 
        </tbody>
      </table>
    </div>

    **app.component.css**
    .selected{background-color:#B0BED9}
4
Karthikeyan m