如何在Angular *ngFor中优先显示locked状态的项

嗨，我来帮你搞定这个需求！要让status为locked的元素在列表里优先显示，这里有两种实用的实现方式，我给你详细说说：

这种方式是在组件类里先把数组排序好，再传给模板渲染，性能更优，也更可控。

首先在你的组件里，创建一个排序后的数组（比如叫sortedItems），然后在组件初始化或者数据更新时执行排序逻辑：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <li *ngFor="let item of sortedItems"> {{item.name}} </li>
  `
})
export class YourComponent implements OnInit {
  // 假设这是你的原始数组
  items = [
    { name: '苹果', status: 'unlocked' },
    { name: '香蕉', status: 'locked' },
    { name: '橙子', status: 'unlocked' },
    { name: '葡萄', status: 'locked' }
  ];
  sortedItems: typeof this.items;

  ngOnInit() {
    this.sortItemsByStatus();
  }

  sortItemsByStatus() {
    // 先复制原数组，避免修改原始数据产生副作用
    this.sortedItems = [...this.items].sort((a, b) => {
      // 把locked的元素排在前面
      if (a.status === 'locked' && b.status !== 'locked') {
        return -1;
      } else if (a.status !== 'locked' && b.status === 'locked') {
        return 1;
      }
      // 状态相同的元素保持原顺序
      return 0;
    });
  }

  // 如果你的items是动态加载或者会随时变化的，记得在数据更新后调用sortItemsByStatus()重新排序
}

这样模板里直接渲染排序后的sortedItems就可以了，逻辑清晰，而且不会因为频繁的变更检测影响性能。

如果你希望直接在模板里处理排序，可以创建一个自定义管道，把数组过滤排序后再传给*ngFor。

首先创建一个管道：

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

@Pipe({
  name: 'lockFirst'
})
export class LockFirstPipe implements PipeTransform {
  transform(items: any[]): any[] {
    // 处理空数组的情况
    if (!items || items.length === 0) {
      return [];
    }
    // 复制数组后排序，同样不修改原数据
    return [...items].sort((a, b) => {
      if (a.status === 'locked' && b.status !== 'locked') {
        return -1;
      } else if (a.status !== 'locked' && b.status === 'locked') {
        return 1;
      }
      return 0;
    });
  }
}

然后在你的模板里直接使用这个管道：

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

⚠️ 注意：Angular默认的管道是纯管道，只有当数组的引用发生变化时（比如重新赋值一个新数组），管道才会重新执行排序。如果只是修改数组里某个元素的status，管道不会自动更新排序结果。如果需要监听数组内部元素的变化，可以把管道设置为不纯管道（在@Pipe装饰器里加pure: false），但这样会在每个变更检测周期都运行管道，数据量大的时候可能影响性能，所以还是更推荐第一种组件内预处理的方式。

内容的提问来源于stack exchange，提问作者Ericky