web-dev-qa-db-ja.com

Angular 5で行を選択する方法

私はAngularの初心者なので、理解してください:)

次のように表示されるユーザーのリストがあります。

enter image description here

これが私の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>

角度を使用してこのテーブルから行を選択するにはどうすればよいですか？選択した行のデータをモーダルに送信して編集したいので、これが必要です。

編集：

つまり、基本的には、行を選択してEDITモーダルをクリックすると、どの行が選択されているかを知りたいので、モーダルのデータにその情報を入力して保存/編集できます。

ありがとう

みんなありがとう！乾杯

angulartwitter-bootstrapdata-bindingdatatablesselection
4
billy_56

あなたが編集または何かのためにそれを望んでいると仮定して、クリックすると各行が完全な行を取得するボタンの下にボタンを追加しました。

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