Standard-Sortierung in Eckig Material - Art-header

Wie kann ich das ändern Eckig Material code unten, so dass die Daten-Tabelle ist sortiert nach der Spalte 'name', aufsteigender Reihenfolge standardmäßig. Pfeil (mit Angabe der aktuellen Sortierreihenfolge) angezeigt werden muss.

Dies ist, was ich erreichen will:

Standard-Sortierung in Eckig Material - Art-header

Original-code:

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

Ich war versucht, so etwas wie dieses, aber es funktioniert nicht (kein Pfeil angezeigt, nicht sortiert)

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

Hier der link zu Plunker

Nennen könnte this.sortData({active: "name", direction: "asc"}) auf ngOnInit check plunker
Es ist nicht die richtige Lösung. Tabelle sortiert ist, sondern eine Art header nicht kennen und Pfeil (mit Angabe der aktuellen Sortierreihenfolge) ist nicht angezeigt.

InformationsquelleAutor Jacek Kościesza | 2017-10-14

  1. 39

    Du bist zu verkennen matSortStart für matSortDirection.

    Versuchen Sie dies:

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

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

    matSortStart können verwendet werden, um reverse-Zyklus verwendet werden, wenn Art (z.B. klickt der Benutzer zu Sortieren, es beginnt bei desc statt asc).

    Diese Methode funktioniert nur für die erste Zeit. Nach der Tabelle ist Datenquelle geändert wurde, versuche ich wieder die matSortActive und matSortDirection aber der kleine Pfeil nicht angezeigt

    InformationsquelleAutor Andrew Seguin

  2. 10

    Können Sie programmgesteuert Sortieren Sie die Tabelle durch aufrufen der sort(Sortable) - Methode der Datenquelle. Vorausgesetzt, du hast eine dataSource Komponente Eigenschaft für die Daten-Quelle:

    //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(<MatSortable>({id: 'name', start: 'asc'});
this.dataSource.sort = this.sort;
    Dies ist eine Art, was ich Suche, aber das einzige Problem ist, es löst die matSortChange Veranstaltung. Gibt es eine Möglichkeit zu Sortieren, ohne das Ereignis ausgelöst?
    Nein. Das ist, wie die Art genannt wird. Warum willst du nicht die matSortChange Ereignis ausgelöst werden?

    InformationsquelleAutor Nino Filiu

  3. 1

    Vielleicht haben Sie versucht zu rufen, die auf die init der Seite die Funktion Sortieren gezwungen, die auf den Namen und die Richtung?

         ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }
    Es ist nicht die richtige Lösung. Tabelle sortiert ist, sondern eine Art header nicht kennen und Pfeil (mit Angabe der aktuellen Sortierreihenfolge) ist nicht angezeigt

    InformationsquelleAutor federico scamuzzi

Schreibe einen Kommentar