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

Posted 2023-03-08

【中文标题】Angular 2. *ngFor 的问题，当我使用 Pipe 时

【英文标题】：Angular 2. Issue with *ngFor, when i use Pipe

【发布时间】：2016-06-01 03:03:50

【问题描述】：

我有一个组件。

@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;
    

【问题讨论】：

cdn.meme.am/instances2/500x/4383577.jpg :)

【参考方案1】：

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

participants = [];

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

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

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

请注意，... 是 ES2015 feature。

【参考方案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;
      
      (...)
    

【参考方案3】：

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

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