如何在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; 
     } 
     }