การเรียงลำดับเริ่มต้นในวัสดุเชิงมุม - จัดเรียงส่วนหัว

ฉันจะเปลี่ยนรหัสวัสดุเชิงมุมด้านล่างได้อย่างไรเพื่อให้ตารางข้อมูลจัดเรียงตามคอลัมน์ 'ชื่อ' โดยเรียงลำดับจากน้อยไปมากตามค่าเริ่มต้น ต้องแสดงลูกศร (ระบุทิศทางการจัดเรียงปัจจุบัน)

นี่คือสิ่งที่ฉันต้องการบรรลุ:

รหัสเดิม:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

ฉันกำลังลองสิ่งนี้ แต่ไม่ได้ผล (ไม่มีลูกศรแสดงขึ้นไม่ได้เรียงลำดับ)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

นี่คือลิงค์ไปยังPlunker

คุณกำลังเข้าใจผิดสำหรับmatSortStartmatSortDirection

ลองสิ่งนี้:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart สามารถใช้เพื่อย้อนกลับรอบที่ใช้เมื่อเรียงลำดับ (เช่นเมื่อผู้ใช้คลิกเพื่อเรียงลำดับจะเริ่มต้นที่ desc แทน asc)

คุณสามารถจัดเรียงตารางโดยใช้โปรแกรมโดยเรียกใช้sort(Sortable)วิธีการของแหล่งข้อมูล สมมติว่าคุณมีdataSourceคุณสมบัติองค์ประกอบสำหรับแหล่งข้อมูล:

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;

@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

ควรทำงาน. การสาธิต

และหากต้องการแสดงลูกศรทิศทางการจัดเรียงให้เพิ่ม css ถัดไป (วิธีแก้ปัญหาชั่วคราว)

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

การอัปเดตสำหรับวัสดุ (ทดสอบด้วย v7.3):

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

นอกจากนี้ยังจะอัปเดตmat-sort-headerลูกศรของโดยไม่มีวิธีแก้ปัญหาใด ๆ

คุณสามารถผูกคุณสมบัติการเรียงตารางเสื่อกับตัวแปรคอมโพเนนต์ของคุณได้เช่นกัน

ดังที่ @Andrew Seguin กล่าวว่า:

<table matSort matSortActive="name" matSortDirection="asc">

นี่เป็นวิธีที่เหมาะสมในการตั้งค่าการจัดเรียงเริ่มต้นหากคุณรู้ว่าอันไหนเป็นอย่างนั้น

ในกรณีที่คุณได้รับการจัดเรียงจากที่อื่น (ในกรณีของฉันจากพารามิเตอร์สตริงการสืบค้น) คุณสามารถทำได้เช่นนี้ (การเรียงลำดับลูกศรทำงานได้อย่างสมบูรณ์ที่นี่):

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

บางทีคุณอาจพยายามโทรไปที่จุดเริ่มต้นของหน้าซึ่งฟังก์ชันการเรียงลำดับบังคับตามชื่อและทิศทาง?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

ในกรณีของฉันการเรียงลำดับไม่ทำงานเนื่องจากmatColumDef id และ mat-cell var แตกต่างกัน

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

หลังจากทำการเปลี่ยนแปลง matColumnDef = "firstName" เป็น matColumnDef = " name " ซึ่งเหมือนกับรายการ ชื่อ

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

มันใช้ได้ดีสำหรับฉัน

ฉันต้องจัดเรียงเริ่มต้นเมื่อโหลด

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

คำตอบจาก @Andrew Seguin (คำตอบแรกและคำตอบที่ยอมรับ) ทำให้ฉันเห็นภาพ แต่มันไม่ได้ เรียงตามตาราง

วิธีแก้ปัญหาของฉันคือใช้รหัส html ที่ให้มาโดย @Andrew Seguin และเรียกเมธอด sortData (sort: Sort) ด้วยตัวเอง แต่จะทำอย่างไร ตามที่ระบุไว้ในเอกสารประกอบ `` Sort '' เป็นอินเทอร์เฟซที่มีคุณสมบัติสองอย่างใช้งานอยู่และทิศทางและอินเทอร์เฟซต้องมีลักษณะดังนี้:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

ดังนั้นเคล็ดลับคือการเรียกใช้เมธอด sortData (sort: Sort) ใน ngOnInit ดังนี้:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

โค้ด HTML เป็นไปตามคำตอบที่ยอมรับ ;-) หวังว่านี่จะช่วยทุกคนอเล็กซ์

ตัวอย่างเอกสาร

มีหลายปัจจัยที่ส่งผลต่อพฤติกรรม ส่วนใหญ่ก็ใช้MatTableDataSource VS อนุพันธ์มือ crafted ของแหล่งข้อมูล วิธีแก้ปัญหาที่แตกต่างกันจึงอาจใช้ได้ผลในบางกรณีและไม่สามารถทำได้ในบางกรณี

อย่างไรก็ตามมันเก่าข้อผิดพลาดที่ได้รับการคุ้มครองอย่างดีบน GitHub โปรดโหวตว่าปัญหา GitHub เพื่อดึงดูดความสนใจของทีม Angular

โซลูชันที่ทนทานที่สุดที่เผยแพร่บนเธรด GitHub นั้น ( ลิงก์ ) คือการเรียกใช้วิธีการต่อไปนี้ในการใช้ลำดับการจัดเรียง:

public setSort(id: string, start?: 'asc' | 'desc') {
    start = start || 'asc';
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    //reset state so that start is the first sort direction that you will see
    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    //ugly hack
    (matSort.sortables.get(id) as MatSortHeader)._setAnimationTransitionState({ toState });
}

หากต้องการเพิ่มการเรียงลำดับโดยทางโปรแกรมให้เพิ่มสิ่งนี้ใน css ของคุณ

::ng-deep.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow { opacity: 1 !important; }