कोणीय सामग्री में डिफ़ॉल्ट छँटाई - शीर्ष लेख छाँटें

Question 1

मैं नीचे कोणीय सामग्री कोड को कैसे बदल सकता हूं, ताकि डेटा-टेबल को 'नाम' कॉलम द्वारा क्रमबद्ध किया जाए, डिफ़ॉल्ट रूप से आरोही क्रम। एरो (वर्तमान सॉर्ट दिशा का संकेत) प्रदर्शित किया जाना चाहिए।

यही मैं हासिल करना चाहता हूं:

मूल कोड:

<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>

यहां प्लंकर से लिंक करें

Question 2

आप गलत कर matSortStartरहे हैं matSortDirection।

इसे इस्तेमाल करे:

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

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

matSortStart सॉर्ट किए जाने पर उपयोग किए जाने वाले चक्र को उल्टा करने के लिए उपयोग किया जा सकता है (जैसे जब उपयोगकर्ता सॉर्ट करने के लिए क्लिक करता है, तो यह asc के बजाय desc पर शुरू होता है)।

Question 3

आप 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;

Question 4

@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);

कार्य करना चाहिए। डेमो

और सॉर्टिंग दिशा तीर दिखाने के लिए, अगली सीएसएस (वर्कअराउंड) जोड़ें

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

Question 5

सामग्री के लिए अद्यतन (v7.3 के साथ परीक्षण):

@ViewChild(MatSort) matSort: MatSort;

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

यह mat-sort-headerबिना किसी वर्कअराउंड के एरो को भी अपडेट करेगा

Question 6

आप मैट चर तालिका गुण आप घटक चर भी बांध सकते हैं।

जैसा @Andrew Seguin कहते हैं:

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

यह डिफ़ॉल्ट तरीके से सेट करने का उचित तरीका है यदि आप जानते हैं कि कौन सा है।

उस स्थिति में जब आप कहीं और से छँटाई करते हैं (क्वेरी स्ट्रिंग params से मेरे मामले में), आप इसे इस तरह भी कर सकते हैं (छँटाई तीर पूरी तरह से यहाँ काम करता है):

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


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

Question 7

हो सकता है कि आपने नाम और दिशा के आधार पर छाँटे गए फ़ंक्शन के पृष्ठ पर प्रवेश करने की कोशिश की हो?

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

Question 8

मेरे मामले में छँटाई काम नहीं कर रही थी क्योंकि 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 = " नाम " जो आइटम के समान है। नाम

    <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>

यह मेरे लिए ठीक काम करता है

Question 9

मुझे लोड पर डिफ़ॉल्ट सॉर्ट करना था

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

Question 10

@Andrew Seguin (प्रथम और स्वीकार किए जाते हैं जवाब) से जवाब मेरे लिए दृश्य चाल किया था, लेकिन यह नहीं था तरह तालिका।

मेरा समाधान @Andrew Seguin द्वारा प्रदान किए गए html कोड का उपयोग करना और सॉर्टडेटा (सॉर्ट: सॉर्ट करना) विधि को स्वयं कॉल करना है, लेकिन यह कैसे करें? जैसा कि प्रलेखन में निर्दिष्ट किया गया है , ,, सॉर्ट '' एक ऐसा इंटरफ़ेस है, जिसमें दो गुण हैं, सक्रिय और दिशा और इंटरफ़ेस को कुछ इस तरह दिखना चाहिए:

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)
}

तो ट्रिक को ngOnInit में SortData (सॉर्ट: सॉर्ट) विधि को कॉल करना है:

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 कोड स्वीकृत उत्तर के रूप में है ;-) उम्मीद है कि यह किसी को भी मदद करता है, एलेक्स

प्रलेखन उदाहरण