如何在Angular * ng For

Question

我有一个包含项目的数组，其中一个字段是＆＃39; status＆＃39;哪个值可以被锁定＆＃39;或者＆＃39;解锁＆＃39;。

当我做* ngFor时，

<li *ngFor="let item of items">
  {{item.name}}
</li>

我想要状态为“锁定”的项目。首先显示。

我怎样才能做到这一点？感谢。

Answer 1

您可以创建pipe来处理商品的分类。

＆＃13;

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({name: 'sortItems'})
export class SortItemsPipe implements PipeTransform {
  transform(items: any[]): any[] {
    if (!items) {
      return [];
    }
    
    const sortedItems = items.sort((itemA, itemB) => {
      if (itemA.status === 'locked' && itemB.status === 'unlocked') {
        return 1;
      } else if (itemA.status === 'unlocked' && itemB.status === 'locked') {
        return -1;
      } else {
        return 0;
      }
    })
    
    return sortedItems
    
  }
}

＆＃13;

＆＃13;

＆＃13;

在SortItemsPipe中声明module，并在模板中使用它：

＆＃13;

＆＃13;

<li *ngFor="let item of items | sortItems">
  {{item.name}}
</li>

＆＃13;

＆＃13;

＆＃13;

目前，状态未锁定的所有项目都将首先显示。