Question

如何添加＆amp;向下箭头显示用户能够使用Angular2 / Angular材料对列进行排序？

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

请求帮助

尼科

Answer 1

您可以参考下面的代码。我希望它能帮助你

<table class="table table-striped">
              <thead>
                <tr>
                  <th class="pointer" (click)="sort('name')">
                    #
                    <i class="fa" [ngClass]="{'fa-sort': column != 'id', 'fa-sort-asc': (column == 'id' && isDesc), 'fa-sort-desc': (column == 'id' && !isDesc) }" aria-hidden="true"> </i>
                </th>
                  <th class="pointer" (click)="sort('name')">
                      Name
                      <i class="fa" [ngClass]="{'fa-sort': column != 'name', 'fa-sort-asc': (column == 'name' && isDesc), 'fa-sort-desc': (column == 'name' && !isDesc) }" aria-hidden="true"> </i>
                  </th>
                  <th class="pointer" (click)="sort('short_code')">
                      Short Code
                      <i class="fa" [ngClass]="{'fa-sort': column != 'short_code', 'fa-sort-asc': (column == 'short_code' && isDesc), 'fa-sort-desc': (column == 'short_code' && !isDesc) }" aria-hidden="true"> </i>
                  </th>
                  <th class="pointer" (click)="sort('created_at')">
                      Created at
                      <i class="fa" [ngClass]="{'fa-sort': column != 'created_at', 'fa-sort-asc': (column == 'created_at' && isDesc), 'fa-sort-desc': (column == 'created_at' && !isDesc) }" aria-hidden="true"> </i>
                  </th>
                  <th class="pointer" (click)="sort('updated_at')">
                      Updated at
                      <i class="fa" [ngClass]="{'fa-sort': column != 'updated_at', 'fa-sort-asc': (column == 'updated_at' && isDesc), 'fa-sort-desc': (column == 'updated_at' && !isDesc) }" aria-hidden="true"> </i>
                  </th>
                  <th class="pointer" (click)="sort('Name')">
                      Status
                      <i class="fa" [ngClass]="{'fa-sort': column != 'Description', 'fa-sort-asc': (column == 'Description' && isDesc), 'fa-sort-desc': (column == 'Description' && !isDesc) }" aria-hidden="true"> </i>
                  </th>
                  <th class="pointer">
                      Actions
                  </th>
                </tr> 
                <tr>
                <th class="pointer">#</th>
                <th class="pointer">First Name</th>
                <th class="pointer">Email</th>
                <th class="pointer">Mobile</th>
                <th class="pointer">User Type</th>
                <th class="pointer">Created at</th>
                <th class="pointer">Updated at</th>
                <th class="pointer">Status</th>
                <th class="pointer">Actions</th>   
                </tr>
              </thead>
              <tbody *ngIf="pages.length">
                <tr *ngFor="let item of items ">
                  <td>{{i}}</td>
                  <td>{{item.first_name}} {{item.last_name}} </td>
                  <td>{{item.email}}</td>
                  <td>{{item.mobile}}</td>
                  <td>{{item.user_type}}</td>
                  <td>{{item.created_at}}</td>
                  <td>{{item.updated_at}}</td>
                  <td><span class="badge badge-success">Active</span></td>
                  <td>

                    <a [routerLink]="[ '/editUser',item.id]" class="btn btn-outline-success"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>

                    <button type="button" class="btn btn-outline-danger" data-toggle="modal" (click)="deleteModalFunc(item.id)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

                  </td>
                </tr>
              </tbody>

              <tbody *ngIf="!pages.length">
                  <tr>
                      <td colspan="7"><div class="talign" >{{iSuccessError.mError}}</div></td>
                    </tr>
              </tbody>
            </table>

如何向用户显示（向上和向下箭头）能够使用Angular2 / Angular材质对列进行排序

1 个答案: