Question

我正在尝试使用此参考资料来实现材料分类： https://material.angular.io/components/sort/overview

唯一的区别是更改选择控件后，我正在加载数据。

当我单击该列时，从理论上讲对数据进行排序不会发生任何事情。

有人可以帮我吗？

排序数据方法：

sortData(sort: Sort) {
debugger;

const data = this.colaborators.slice();
if (!sort.active || sort.direction === '') {
  this.sortedColaborators = data;
  return;
}

this.sortedColaborators = data.sort((a, b) => {
  const isAsc = sort.direction === 'asc';
  switch (sort.active) {
    case 'register': return compare(a.register, b.register, isAsc);
    case 'name': return compare(a.name, b.name, isAsc);
    case 'company': return compare(a.company, b.company, isAsc);
    case 'costCenter': return compare(a.costCenter, b.costCenter, isAsc);
    case 'linhaTransporte': return compare(a.linhaTransporte, b.linhaTransporte, isAsc);
    case 'saldoHorasMes': return compare(a.saldoHorasMes, b.saldoHorasMes, isAsc);
    case 'saldoHorasAno': return compare(a.saldoHorasAno, b.saldoHorasAno, isAsc);
    default: return 0;
  }
});

}

在类之外比较功能

function compare(a: number | string, b: number | string, isAsc: boolean) {

return（a

该类的构造函数：

constructor(dialogService: DialogService,
private router: Router,
private formBuilder: FormBuilder,
private utilService: UtilService,
private workScheduleService: WorkscheduleService,
private activatedRoute: ActivatedRoute,
private route: ActivatedRoute,
private location: Location) {

super(dialogService);

this.workschedule = new WorkSchedule();
this.showWorkScheduleConfirmation = false;
this.showWorkSchedule = true;
this.colaborators = [];
this.sortedColaborators = [];

}

初始化：

colaborators: Colaborator[];

sortedColaborators：协作者[];

HTML：

<table class="table" matSort (matSortChange)="sortData($event)">
                    <thead>
                        <tr>
                            <th style="width: 40px; text-align: center;"><input type="checkbox" [ngModelOptions]="{standalone: true}" [disabled]="checkedDisabled" [(ngModel)]="selectedAll" (click)="checkAll($event)"></th>
                            <th style="width: 40px; text-align: center;"><input type="checkbox" [ngModelOptions]="{standalone: true}" [disabled]="checkedDisabled" [(ngModel)]="selectedAllTransport" (click)="checkAllTransport($event)"></th>
                            <th mat-sort-header="register" class="pointer">Registro</th>
                            <th class="pointer">Nome</th>
                            <th class="priority-2 pointer">Empresa</th>
                            <th class="priority-2 pointer">C.Custo</th>
                            <th class="priority-3 pointer">Linha</th>
                            <th class="priority-4 pointer">Saldo Mensal</th>
                            <th class="priority-5 pointer">Saldo Anual</th>
                        </tr>
                    </thead>
                    <tbody *ngFor="let colab of sortedColaborators | filter: searchText">
                        <tr [ngClass]="{ 'row-error' : colab.error, '' : !colab.error }">
                            <td style="width: 40px; text-align: center;"><input type="checkbox" [disabled]="colab.disabled" [(ngModel)]="colab.checked" [ngModelOptions]="{standalone: true}" (change)="checkIfAllSelected(colab)"></td>
                            <td style="width: 40px; text-align: center;"><input type="checkbox" [disabled]="colab.disabled" [(ngModel)]="colab.checkedTransport" [ngModelOptions]="{standalone: true}" (change)="checkIfAllSelectedTransport(colab)"></td>
                            <td>{{colab.register}}</td>
                            <td>{{colab.name}}</td>
                            <td class="priority-2">{{colab.company}}</td>
                            <td class="priority-2">{{colab.costCenter}}</td>
                            <td class="priority-3">
                                <select class="form-control" [disabled]="colab.disabled" [ngModelOptions]="{standalone: true}" [(ngModel)]="colab.linhaTransporte">
                                    <option *ngFor="let linhaTransporte of linhasTransporte"
                                        [ngValue]="linhaTransporte.id">{{linhaTransporte.numero}}</option>
                                </select></td>
                            <td class="priority-4">{{colab.saldoHorasMes}}</td>
                            <td class="priority-5">{{colab.saldoHorasAno}}</td>
                        </tr>
                    </tbody>
                </table>

Answer 1

您提到的

唯一的区别是我更改了选择控件。

事件(matSortChange)仅在用户单击排序后发生，在这种情况下，您只有一个可排序的列，但并不重要。

我写了假的组件来模拟我会做的事

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Component implements OnInit, OnDestroy {
    private sortSettings: Sort = { active: '', direction: '' };
    private allData = [];
    private sortedColaborators$ = new BehaviorSubject([]);
    filter = new FormControl();
    constructor(private service: YouService){

    }
    ngOnInit() {
        this.service
            .loadData()
            .pipe(take(1))
            .subscribe(data => {
                this.allData = data;
                this.sortAndFilterData();
            });
        this.filter.valueChanges.pipe(untilComponentDestroyed(this)).subscribe(() => {
            this.sortAndFilterData();
        });
    }
    ngOnDestroy(): void {

    }

    onSortData(sort: Sort) {
        this.sortSettings = sort;
        this.sortAndFilterData();
    }

    private sortAndFilterData() {
        const data = this.allData
            .filter(d => {
                if (!this.filter.value) {
                    return true;
                }
                const v = this.filter.value.toLowerCase();
                return (
                    d.fieldYouWantToCompare
                        .toString()
                        .toLowerCase()
                        .indexOf(v) > -1 || d.otherField.toLowerCase().indexOf(v) > -1
                );
            })
            .sort((a, b) => {
                const isAsc = this.sortSettings.direction === 'asc';
                switch (this.sortSettings.active) {
                    case 'register':
                        return this.compare(a.register, b.register, isAsc);

                    default:
                        return 0;
                }
            });
        this.sortedColaborators$.next(data);
    }

    private compare(a: number | string, b: number | string, isAsc: boolean) {
        return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
    }
}

在模板中，您几乎不需要更改 1.使用可观察的

*ngFor="let colab of sortedColaborators | async"

您的输入过滤器应具有[formControl]="filter"

注意：直到ComponentsDestroyed-来自https://github.com/w11k/ngx-componentdestroyed 注意2：我更喜欢使用可观察的

我正在尝试实施材料分类

1 个答案: