Question

如何在角度4

中创建自定义排序管道

component.ts

@Component({
    selector: 'app-cinemas',
    templateUrl: './cinemas.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./cinemas.component.css']
})
export class CinemasComponent implements OnInit {

    filteredCinema = [];   

 master() {
        this.cinemaService.getCinMaster()
            .subscribe(
                (response: any) => {
                    this.filteredCinema = response;
                },
            //  (error) => console.log(error)
        );}

component.html

<div class="table-scrollable">
<table class="table table-striped table-bordered table-advance table-hover">
<thead>
   <tr>
   <th>Cinema</th>
    <th>Cinema Operator</th>
    <th>Capacity</th>
     <th>Cinema Status</th>
     <th>Unavailable From Date</th>
     <th>Unavailable To Date</th>
     <th>Actions</th>
     </tr>
</thead>
   <tbody>
 <!-- Loop starts here -->
 <tr class="cinema-row cathay" *ngFor="let cintable of filteredCinema | sorting:'cintable.cinema_name' ">
 <td>
  <p class="uppercase">{{cintable.cinema_name }}</p>
 </td>
   <td> 
   <img [src]="getOperatorImg(cintable.cinema_operator_id)" height="30">
     </td>
    <td>
 <small>
Halls:
 <strong>{{cintable.halls.length}}</strong>
 </small>
  </td>
  <td>
<p class="uppercase">{{getStatusName(cintable.status)}}</p>
 </td>
 <td>
 <p class="uppercase">{{cintable.available_date_from | date}}</p>
 </td>
 <td>
 <p class="uppercase">{{cintable.available_date_to | date}} </p>
</td>
 <td>
 <p class="uppercase">{{cintable.entity}} </p>
</td>
<!-- Loop ends here -->
  </tbody>
 </table>
</div>

Pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sorting'
})
export class SortingPipe implements PipeTransform {  
  transform(value: any, args?: any): any {
    return null;
  }
}

需要对cintable.cinema_name进行排序，但无法找到解决方案。这是我经历过的链接 http://hashtagcoder.com/an-introduction-to-angular-cli-part-3-sort-and-filter-data-with-custom-pipes/

https://hassantariqblog.wordpress.com/2017/03/16/angular2-creating-custom-sort-filter-pipe-for-datetime-column-ngfor-directive/

请帮我解决这个问题

Answer 1

从Angular 2中删除了orderBy管道，因为通常这样的过滤逻辑应该在组件内完成。由于您已经从组件返回filteredCinema，因此最好在此处应用自定义排序。

假设您希望通过cinema_name进行不区分大小写的排序，请在您的订阅回调中执行以下操作：

this.filteredCinema = return items.sort((a, b) => {
    let aLC: string = a.cinema_name.toLowerCase();
    let bLC: string = b.cinema_name.toLowerCase();
    return aLC < bLC ? -1 : (aLC > bLC ? 1 : 0);
});

（另外，在这种情况下，你应首先确保响应不为空，为简单起见，我将其排除在外）

如果您希望过滤区分大小写，只需删除.toLowerCase调用。

如果您仍想通过管道进行操作，则应首先继续阅读本教程，因为您缺少排序机制。

让我们说你想要一个管道订单ByCinemaName：

@Pipe({
  name: 'orderByCinemaName'
})
export class OrderByCinemaNamePipe implements PipeTransform {  
  transform(items: any[]): any[] {
    return items.sort((a, b) => {
        let aLC: string = a.cinema_name.toLowerCase();
        let bLC: string = b.cinema_name.toLowerCase();
        return aLC < bLC ? -1 : (aLC > bLC ? 1 : 0);
    });
  }
}

<强>更新

修正了排序算法。

如何在角度4中创建自定义排序管道

1 个答案: