Question

在我要说什么之前，我想说我对所有这些都是新手，所以请尽量不要太过专业。谢谢！我有一个对象数组。每个对象都有一个日期，我正在尝试按该日期对它们进行排序。

async list_all_shifts(){
try {
  let response = (await this.shiftService.list_all_shifts().toPromise())

  for (let shiftje of response) {
    this.shiften.push(shiftje);
  }

  this.shiften.sort();

}catch(err){

}

我遇到的问题是我尝试对数组进行排序的部分实际上没有执行任何操作。 shiften数组具有许多带有日期，beginHour，endHour等的对象。在我的html组件中，它只是按随机顺序显示日期，我希望对它们进行排序。我的HTML组件如下所示：

<tr *ngFor="let shift of shiften, index as i;">
  <td>{{shift.datum |  date:'EEE, dd/MM/yyyy'}}</strong></td><td>{{ shift.beginuur }}h</td><td> {{ shift.einduur }}h </td> <td>{{shift.helpers.ingeschreven.length}}/{{shift.helpers.max}}</td>
<td><button class="btn btn-success">Inschrijven {{ shift._id }}</button></td>
<td><button (click)="verwijderShift(shift, shift._id)">Verwijder</button></td>
</tr>

最后，我获取数据的服务如下所示（我正在使用带有api的后端）；

list_all_shifts() : Observable<any> {
const header = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': localStorage.getItem('token')
  })
}

return this.http.get<any>(`${this.API_URL}/shifts`,header)

}

其中有些在荷兰，但我希望您能得到我在这里想要做的事情！预先谢谢你。

Answer 1

这样做：

class Component {
    shifts$: Observable<Shift>;
    constructor(private shiftService: ShiftService) {
    }
    ngOnInit(){
         this.shiftService.list_all_shifts()
             .pipe(
                 map(shiftArray => [...shiftArray].sort()),
                 catchError(err => {
                     // handle the error
                     doSth()
                     // return an empty array so you template logic doesnt fail
                     return of([])
                 })
             )
    }

}

在模板中，使用异步管道：

<tr *ngFor="let shift of shifts$ | async, index as i;">
    ...
</tr>

从您凌乱的代码中可以看出，您使用的不是一个好的IDE。考虑使用IntelliJ或VScode，并注意您的代码。保持其清洁易懂。

Answer 2

针对正在寻找相同答案的人们。就像在编写的注释中一样，要获得按日期排序的数组，您必须使用sort函数的第一个可选参数“ compareFunction”。参见https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

async list_all_shifts(){
try {
  let response = (await this.shiftService.list_all_shifts().toPromise())

  for (let shiftje of response) {
    this.shiften.push(shiftje);
  }

  this.shiften.sort(function(a, b) {
    return new Date(a.datum).getTime() - new Date(b.datum).getTime();
  });

} catch(err) {}

如何使用Angular 5对组件中的对象数组进行排序？

2 个答案: