使用 ngFor 显示排序列表而不对 Angular2 中的源进行排序

Question

我有一系列约会

export class DashboardComponent implements OnInit {
    appointments: IAppointment[];
    ...

然后我将列表传递给列表组件

<div class="col-md-6">
    <appointment-list [appointments]="appointments" [title]="'Aankomende afspraken'"></appointment-list>
</div>
<div class="col-md-6">
    <appointment-list [appointments]="appointments" [title]="'Ingecheckte afspraken'"></appointment-list>
</div>

在此列表组件中，我使用 *ngFor

上的管道对约会进行排序

<tbody *ngFor="let appointment of appointments | orderBy : '-startTime'>
...
</tbody>

请看图片和结果（看顺序的不同！）：

第一个组件的顺序正确，但第二个组件的顺序相反？

为什么？
orderBy是否对源数组进行排序？
还是只显示排序的数组？

我希望能够使用相同的源数组和相同的排序但使用不同的过滤来显示组件，这就是我显示组件两次的原因。

Answer 1

| orderBy 是一个管道，如果对原始数组进行排序然后返回，或者管道创建包含相同元素的新数组实例，则取决于它的实现。

使用 ngFor 显示排序列表而不对 Angular2 中的源进行排序

Displaying a sorted list with ngFor without sorting the source in Angular2

angular

sql-order-by

ngfor