如何在Angular2上點擊某個按鈕，在表格中上下移動行？

Question

下面是我的一個html表格的代碼，我需要添加一個函數，在 點擊按鈕上移或下移行？

<table class="table table-striped"> 
      <thead class="thead"> 
       <tr> 
        <th>Name</th> 
        <th>Key</th> 
        <th>Token</th> 
        <th>Color</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let value of values"> 
        <td> 
         {{value.name}} 
        </td> 
        <td> 
         {{value.key}} 
        </td> 
        <td> 
         {{value.token}} 
        </td> 
        <td> 
         {{value.color}} 
        </td> 
        <td> 
         <button class="btn btn-success" (click)="editvalue(value);">edit</button> | 

        </td> 
       </tr> 
      </tbody> 
     </table> 

你能幫我嗎我該怎麼做？感謝您的幫助。

Answer 1

它可以很容易地做到更新數據項索引如下。

的Html

<table class="table table-striped"> 
      <thead class="thead"> 
       <tr> 
        <th>Name</th> 
        <th>Key</th> 
        <th>Token</th> 
        <th>Color</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let value of values; let index = index;"> 
        <td> 
         {{value.name}} 
        </td> 
        <td> 
         {{value.key}} 
        </td> 
        <td> 
         {{value.token}} 
        </td> 
        <td> 
         {{value.color}} 
        </td> 
        <td> 
         <button class="btn btn-success" (click)="moveUp(value, index);">Move Up</button> 
        </td> 

        <td> 
         <button class="btn btn-success" (click)="moveDown(value, index);">Move Down</button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

Component.ts

moveUp(value, index) { 
    if (index > 0) { 
     const tmp = this.values[index - 1]; 
     this.values[index - 1] = this.values[index]; 
     this.values[index] = tmp; 
    } 
    } 

moveDown(value, index) { 
     if (index < this.values.length) { 
      const tmp = this.values[index + 1]; 
      this.values[index + 1] = this.values[index]; 
      this.values[index] = tmp; 
     } 
     }