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"}];

View是第一次绘画..但是当我点击标题来对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));

视图未更新，而类变量的值在角度2 beta中更改

2 个答案: