查看沒有更新，而類變量的值角2公測改爲

Question

我想排序表逐列

我的HTML表格以下變量的

<table class="table tr-table table-hover table-striped"> 
       <thead> 
        <tr> 
         <th># </th> 
         <th (click)="sortTr('cat')">Category <i class="fa fa-caret-square-o-down"></i></th> 
         <th (click)="sortTr('vendor')">vendor <i class="fa fa-caret-square-o-down"></i></th> 
         <th (click)="sortTr('date')">date <i class="fa fa-caret-square-o-down"></i></th> 
         <th (click)="sortTr('tag')">tag <i class="fa fa-caret-square-o-down"></i></th> 
         <th (click)="sortTr('amount')">amount <i class="fa fa-caret-square-o-down"></i></th> 
         <th (click)="sortTr('crd')">crd <i class="fa fa-caret-square-o-down"></i></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="#inst of trLst | tempConvert:filterTbl.value:2;#i=index" style="border: 1px solid {{inst.color}}"> 
         <th scope="row">{{i+1}}</th> 
         <td>{{inst.cat}}</td> 
         <td>{{inst.vendor}}</td> 
         <td>{{inst.date}}</td> 
         <td>{{inst.tag}}</td> 
         <td>{{inst.amount}}</td> 
         <td>{{inst.crd}}</td> 
        </tr> 
       </tbody> 
      </table> 

控制檯輸出是在排序的形式，但圖未更新 我的排序邏輯是如下：下面

sortTr(pr){ 
     console.log('srt: ',pr); 
     let tmpTr=this.trLst; 
     this.trLst = tmpTr.sort(function(a,b){ 
      if (a[pr] < b[pr]) return -1; 
      else if (a[pr] > b[pr]) return 1; 
      else return 0; 
     }); 
     console.log(this.trLst); 
    } 

演示對象值被下式給出：

this.trLst=[{"vendor":"Yumist","cat":"Personal & Entertainment","bnk":"favicon","crd":"x0939","tag":"#cash","date":"31-07-15","photo_path":"favicon.ico","typ":"img","amount":20642,"color":"#a00","curr":"rupee"}, 
      {"vendor":"Hauz Khas Social","cat":"Insurence","bnk":"favicon","crd":"x0939","date":"31-07-15","photo_path":"fa fa-user","typ":"ico","amount":19000,"color":"#a0a","curr":"rupee"}, 
      {"vendor":"Dominos","cat":"Monthly Essencial","bnk":"favicon","crd":"x0939","tag":"#smoke","date":"31-07-15","photo_path":"fa fa-user","typ":"ico","amount":10175,"color":"#aa0","curr":"rupee"}, 
      {"vendor":"Foodpanda","cat":"Equities & bonds","bnk":"favicon","crd":"x0939","date":"31-07-15","photo_path":"fa fa-user","typ":"ico","amount":9000,"color":"#0a0","curr":"rupee"}, 
      {"vendor":"Insurence","cat":"Multi Brand","bnk":"favicon","crd":"x0939","tag":"#tax Saving","date":"31-07-15","photo_path":"fa fa-user","typ":"ico","amount":5881,"color":"#00a","curr":"rupee"}]; 

觀畫的是首次..但是當我點擊標題排序的coulmn它安慰正確輸出，但鑑於仍是以前的

邏輯管道如下：

// We use the @Pipe decorator to register the name of the pipe 
@Pipe({ 
    name: 'tempConvert' 
}) 

// The work of the pipe is handled in the tranform method with our pipe's class 
class TempConvertPipe implements PipeTransform { 
    strVal:string; 
    filterByID:Function; 
    filterByAll:Function; 
    constructor() { 
     this.filterByID=obj=>{ 
      let rjx=new RegExp(this.strVal+".*",'gi'); 
      if (obj.vendor.match(rjx)) { 
       return true; 
      } else { 
       return false; 
      } 
     }; 
     this.filterByAll=obj=>{ 
      let rjx=new RegExp(this.strVal+".*",'gi'); 
      let keys=Object.keys(obj); 
      let isFind = false; 
      for(let i=0;i<keys.length;i++){ 
       if (obj[keys[i]] && (""+obj[keys[i]]).match(rjx)) { 
        isFind = true; 
        break; 
       } 
      } 
     return isFind; 
     } 
    } 
    transform(value: any, args: any[]) { 
     this.strVal=args[0]; 
     if (args[1] === 1) { 
      return value.filter(this.filterByID); 
     }else if (args[1] === 2) { 
      return value.filter(this.filterByAll); 
     } 
     return; 
    } 
} 

手段角2未檢測類變量的變化

Answer 1

實際上，正確調用了sortTr方法，並且每次刷新視圖。

問題在於處理這個函數。它每次都以相同的方式排序。這意味着您在第一次看到差異時，由於訂單保持不變，因此再次點擊時出現差異。

您需要在每次單擊標題時反轉訂單以查看不同的（a到z或z到a）。下面是cat列的實現：

export class AppComponent { 
    constructor() { 
    this.trLst = (...) 

    this.asc = { 
     cat: true, 
     (...) 
    }; 
    } 

    sortTr(pr){ 
    // Invert order 
    this.asc[pr] = !this.asc[pr]; 

    // Sort 
    let tmpTr=this.trLst; 
    this.trLst = tmpTr.sort((a,b) => { 
     var r = 0; 
     if (a[pr] < b[pr]) r = -1; 
     else if (a[pr] > b[pr]) r = 1; 
     else return 0; 

     if (!this.asc[pr]) { 
     r = -r; 
     } 
     return r; 
    }); 
    } 
} 

這裏是對應plunkr：https://plnkr.co/edit/XqHYTqL2BadyVltajVhs?p=preview

Answer 2

問題的代碼的JavaScript當我提出以下在變化通過引用

分配值上面的代碼來殺死引用它的工作。

let tmpTr = JSON.parse(JSON.stringify(this.trLst));