如何 select 排在 Angular 5

Question

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

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

这是我的 HTML:

编辑 - 添加了 CRUD 按钮：

  <!--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 从 table 中 select 一行？我需要它，因为我想将 selected 行的数据发送到模式进行编辑..

编辑：

所以基本上，当我 select 一行时，当我点击编辑模态时，我想知道哪一行是 selected 以便我可以用该信息填充模态的数据和 save/edit 它..

谢谢

谢谢大家！干杯

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}

如何 select 排在 Angular 5

How to select a row in Angular 5

data-binding

datatables

selection

twitter-bootstrap

angular