Question

我正在对某些数据使用排序方法，据我了解，排序在实际数据输入之前已被“激活”，尽管它可以正常工作，但在控制台中却留下了一些错误：ERROR TypeError: Cannot read property 'sort' of null.

<ng-container *ngFor="let attendee of (listOfAttendees$ | async | sort:'lastName': 'firstName':'asc')">
    <div class="attendees-list__item d-flex">
        <div class="attendees-list__item-name course-details-attendees col-4 col-md-4 text text-cooler-grey align-self-center pl-3">
          {{ attendee?.lastName }}, {{ attendee?.firstName }}
        </div>
    </div>
</ng-container>

有什么好地方可以移动排序功能，使其不提供null输出？

Answer 1

我建议编辑可观察对象，这样您就不必在模板内进行排序

@Component({...})
export class MyComponent {
  listOfAttendees$: Observable<Attendant[]>;
  sortedAttendees$ = this.listOfAttendees$.pipe(
    map(attendees => attendees ? attendees.sort((a, b) => {
      const lastname = a.lastName.localeCompare(b.lastName);
      return lastname === 0 ? a.firstName.localeCompare(b.firstName) : lastname;
    }) : null)
  )
}

并在您的模板中

<ng-container *ngFor="let attendee of sortedAttendees$ | async">

Answer 2

您可以编辑可观察对象吗？如果是这样，您可以发出一个空数组而不是一个空值。那应该防止TypeError。

角度-无法读取null的属性“ sort”

2 个答案: