使用 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 是一个管道，如果对原始数组进行排序然后返回，或者由管道创建包含相同元素的新数组实例，这取决于它的实现。