Angular 2. *ngFor 的问题，当我使用 Pipe 时

Question

我有一个组件。

@Component({
    selector: 'top3',
    templateUrl: 'dev/templates/top3.html',
    pipes: [orderBy],
    providers: [HTTP_PROVIDERS, ParticipantService]
})
export class AppTop3Component implements OnInit {

    constructor (private _participantService: ParticipantService) {}

    errorMessage: string;
    participants: any[];

    ngOnInit() {
        this.getParticipants();
    }

    getParticipants() {
        this._participantService.getParticipants()
            .then(
                participants => this.participants = participants,
                error => this.errorMessage = <any>error
            );
    }

}

此组件使用名为_participantService 的服务。 _participantService 检索对象数组。我在组件的模板中输出我的对象数组：

<h2>Top 3</h2>
<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#participant of participants | orderBy: '-score'; #i = index">
            <td>{{i+1}}</td>
            <td>{{participant.username}}</td>
            <td>{{participant.score}}</td>
        </tr>
    </tbody>
</table>

我使用一个名为 orderBy 的管道和 *ngFor 指令。问题是当我不以这种方式使用管道和输出数组时：

<tr *ngFor="#participant of participants; #i = index">

一切正常，我得到了正确的结果：

但是当我想对对象的数组进行排序并使用我的管道时，我没有任何输出：

我的管道函数中有一个未定义的对象^

@Pipe({
    name: 'orderBy',
    pure: false
})

export class orderBy implements PipeTransform {
    transform(arr: any[], orderFields: string[]): any {
        console.log(arr);
        orderFields.forEach(function(currentField: string) {
            var orderType = 'ASC';

            if (currentField[0] === '-') {
                currentField = currentField.substring(1);
                orderType = 'DESC';
            }

            arr.sort(function(a, b) {
                return (orderType === 'ASC') ? 
                        (a[currentField] < b[currentField]) ? -1 :
                        (a[currentField] === b[currentField]) ? 0 : 1 :                                                                                                                   
                        (a[currentField] < b[currentField]) ? 1 : 
                        (a[currentField] === b[currentField]) ? 0 : -1;
            });

        });
        return arr;
    }
}

Answer 1

您可以简单地在组件中定义一个空数组，而不是修改您的管道实现以处理 null（即@Thierry 的答案）：

participants = [];

当数据从服务器返回时，要么将项目推送到现有数组中，

.then(participants => this.participants.push(...participants),

或者做你已经做的：分配一个新数组。

请注意，... 是 ES2015 feature。

Answer 2

由于您使用 Promise 异步加载数据，因此它们在开始时为 null（在调用 then 方法中定义的第一个回调之前）。

您需要检查管道中的 are 参数是否为空。如果是这样，您不应该执行“order by”处理...

当结果出现时，将再次使用数据调用管道（不会为空）。在这种情况下，您将能够对数据进行排序...

你可以试试这个代码：

@Pipe({
    name: 'orderBy',
    pure: false
})

export class orderBy implements PipeTransform {
    transform(arr: any[], orderFields: string[]): any {
      if (arr==null) {
        return null;
      }
      (...)
    }
}

Answer 3

根据管道文档 (https://angular.io/docs/ts/latest/guide/pipes.html#!#jsonpipe) 的示例，您错过了括号：

<tr *ngFor="#participant of (participants | orderBy: '-score'); #i = index">