如何在Angular 5中选择一行

Question

我是Angular的新手，所以请理解我:)

我有一个用户列表，显示如下：

这是我的HTML：

编辑-附加的欺诈按钮：

  <!--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>

我想知道如何使用angular从该表中选择一行？我需要这样做是因为我想将所选行的数据发送到模态进行编辑。

编辑：

因此，基本上，当我选择一行并单击“编辑”模式时，我想知道选择了哪一行，以便可以用该信息填充模式的数据并保存/编辑。

谢谢

多谢你们！干杯

Answer 1

假设您要进行编辑或其他操作，我在按钮下方添加了一个按钮，每单击一次，您将获得完整的一行。

  <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);
}

更新：

如果您不想在每一行上都单击按钮，而仅通过单击行来获取选定行的数据，则下面是代码。

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

对于有问题的编辑：

在html中的上述代码之后，在您的组件中。

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

再次以您的模态。

<modal>
<input type="text" [(ngModel)]="selectedUser.Name" />
<input type="text" ([ngModel)]="selectedUser.Position" />
...
...
</modal>

Answer 2

    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}