角8-注入类指示表排序方向

Question

我正在尝试将一个类注入到我的表的头中。表列可以排序、降序和升序。我希望根据列的方向更改头类。当列未被主动排序时，也会注入一个“默认”类。

在我的组成部分中有几件事我应该注意。sortDirection$ = this.sortedColumn$.pipe()是我把排序方向拉到变量中的地方。我将它存储在directionColumn变量中。当单击其中一个表标题时，将调用sortOn()。这也是我决定用activeColumn变量排序哪一列的地方。您可以看到，getClass()是我引入这两个变量的地方，以确定( 1)列是否被排序，以及( 2)排序的方向。

import { NavbarService } from './../navbar/navbar.service';
import { LiveUpdatesService } from './live-updates.service';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Observable } from 'rxjs';
import { sortByColumn } from './../utilities/array.functions';
import { combineLatest, BehaviorSubject } from 'rxjs';
import { map, scan } from 'rxjs/operators';

@Component({
  selector: 'app-live-updates',
  templateUrl: './live-updates.component.html',
  styleUrls: ['./sass/live-updates.component.scss']
})
export class LiveUpdatesComponent implements OnInit{
  stocks$: Observable<any[]>;
  sortedColumn$ = new BehaviorSubject<string>('');
  activeColumn: string;
  directionColumn: string;

  sortDirection$ = this.sortedColumn$.pipe(
    scan<string, {col: string, dir: string}>((sort, val) => {
      this.directionColumn = sort.dir;
      console.log(sort.dir);
      return sort.col === val
        ? { col: val, dir: sort.dir === 'desc' ? 'asc' : 'desc' }
        : { col: val, dir: 'desc' };
    }, {dir: 'desc', col: ''})
  )


  constructor(private updatesService: LiveUpdatesService, public nav: NavbarService, private cdRef : ChangeDetectorRef) {
    // combine observables, use map operator to sort
    this.stocks$ = combineLatest(this.updatesService.getStocks(), this.sortDirection$).pipe(
      map(([list, sort]) => !sort.col ? list : sortByColumn(list, sort.col, sort.dir))
    );
  }
  sortOn(column: string) {
    this.activeColumn = column;
    this.sortedColumn$.next(column);
  }

  getClass(columnID: string) {
    if (this.activeColumn === columnID && this.directionColumn === "asc"){
      return "asc";
    } else if (this.activeColumn === columnID && this.directionColumn === "desc") {
      return "desc"
    } else {
      return "default";
    }
  }
  ngOnInit() {
    this.nav.show();
  }
  ngAfterViewInit() {
    this.cdRef.detectChanges();
  }
}

您可以在我的HTML中看到，我调用getClass('activeColumn')来确定类。当一个列未被有效排序时，getClass()返回“默认”。单击标头后，它将返回"asc“或"desc”。表的HTML：

<table class="stock-updates">
            <thead>
                <tr>
                    <th class="ticker-fixed">Listing</th>
                    <th>
                        <a (click)="sortOn('price')" [ngClass]="getClass('price')">Ask Price</a>
                    </th>
                    <th>
                        <a (click)="sortOn('zestimate')" [ngClass]="getClass('zestimate')">Zes.</a>
                    </th>
                    <th>
                        <a (click)="sortOn('tax_diff')" [ngClass]="getClass('tax_diff')">Tax Difference</a>
                    </th>
                    <th>
                        <a (click)="sortOn('zes_diff')" [ngClass]="getClass('zes_diff')">Zes. Difference</a>
                    </th>
                    <th>
                        <a (click)="sortOn('cash_on_cash')" [ngClass]="getClass('cash_on_cash')">Cash on Cash</a>
                    </th>
                    <th>
                        <a (click)="sortOn('rent_zestimate')" [ngClass]="getClass('rent_zestimate')">Rent Zes.</a>
                    </th>
                    <th>
                        <a (click)="sortOn('rent_to_val')" [ngClass]="getClass('rent_to_val')">Rent to Val.</a>
                    </th>
                    <th>
                        <a (click)="sortOn('sqft')" [ngClass]="getClass('sqft')">SqFt</a>
                    </th>
                    <th>
                        <a (click)="sortOn('status_text')" [ngClass]="getClass('status_text')">Status</a>
                    </th>
                    <th>
                        <a (click)="sortOn('search_name')" [ngClass]="getClass('search_name')">Query</a>
                    </th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let s of ((stocks$ | async) | search:'address':query)">
                    <td class="ticker-fixed">
                        <a target="_blank" href="{{s.detail_url}}"><img src="./assets/img/external-link-solid.svg" alt="Zillow Listing"></a>
                    </td>
                    <td>{{ s.price | currency:'USD':'symbol-narrow':"1.0-2" }}</td>
                    <td>{{ s.zestimate | currency:'USD':'symbol-narrow':"1.0-2" }}</td>
                    <td>{{ s.tax_diff | currency:'USD':'symbol-narrow':"1.0-2" }}</td>
                    <td>{{ s.zes_diff | currency:'USD':'symbol-narrow':"1.0-2" }}</td> 
                    <td>{{ s.cash_on_cash | percent }}</td>
                    <td>{{ s.rent_zestimate | currency:'USD':'symbol-narrow':"1.0-2" }}</td>                  
                    <td>{{ s.rent_to_val | percent }}</td>
                    <td>{{ s.sqft }}</td>
                    <td>{{ s.status_text }}</td>
                    <td>{{ s.search_name }}</td>
                    <td>{{ s.address }}</td>
                </tr>
            </tbody>
        </table>

处理排序的函数：

export function sortByColumn(list: any[] | undefined, column:string, direction = 'asc'): any[] {
  let sortedArray = (list || []).sort((a,b)=>{
    if(a[column] > b[column]){
      return 1;
    }
    if(a[column] < b[column]){
      return -1;
    }
    return 0;
  })
return (direction === 'asc') ? sortedArray : sortedArray.reverse();
}

我的问题是我的课没有被准确地注入。例如，当我开始点击不同的标题时，正如我所怀疑的那样，类会被注入，但最终，它们会被混在一起。一个标头可能准确地显示.asc并按升序排序，但在不同的标头之间单击然后返回到该标头后，它可能会显示.desc并按升序排序。

注意箭头图标在这些屏幕截图中是如何变化的，而排序方向却没有变化。为了确认一下，排序功能运行良好。只是类的注入变得杂乱无章。

​

​

​

我在这里做错什么了？我可以改变什么，使类准确地反映排序的方向？

Answer 1

我试图复制您所面临的问题，并修复它这里。我确实发现了代码的两个问题。

1. 排序逻辑的问题:您的助手函数return (direction === 'asc') ? sortedArray : sortedArray.reverse();中有以下代码，这些代码将反转生成的数组，而不管按降序排列列中的内容，我通过将逻辑更新到：

​

export function sortByColumn(list: any[] | undefined, column:string, direction = 'asc'): any[] {
  const isAscending = direction === 'asc';
  const sortedArray = (list || []).sort((a,b)=>{
    if(a[column] > b[column]){
      return isAscending ? 1 : -1;
    }
    if(a[column] < b[column]){
      return isAscending ? -1 : 1;
    }
    return 0;
  });

  return sortedArray;
}

​

1. 我修正的第二件事是在更新directionColumn变量的逻辑中。您是根据累积值this.directionColumn = sort.dir; (而不是新值)来更新它的，因此您的directionColumn将与排序的方向数据不同。

​

sortDirection$ = this.sortedColumn$.pipe(
  scan<string, {col: string, dir: string}>((sort, val) => {
    const retVal = sort.col === val
      ? { col: val, dir: sort.dir === 'desc' ? 'asc' : 'desc' }
      : { col: val, dir: 'desc' };
    this.directionColumn = retVal.dir;      
    return retVal;
  }, {dir: 'desc', col: ''})
)

​