как создать собственную сортировочную трубу в angular 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, но не удается найти решение. Вот ссылка, по которой я прошел https://hashtagcoder.com/an-introduction-to-angular-cli-part-3-sort-and-filter-data-with-custom-pipes/
Пожалуйста, помогите мне с этим
