Question

date-descned.ts上的排序功能确实起作用，因为它记录的数据（如下所示）是降序排列的。但是，当我运行页面时，数据将不会显示在html中。 html中的* ngFor语句中的管道格式是否存在问题，或者.ts文件中的return语句是否存在问题？我正在使用延迟加载在离子框架中进行开发。当我遇到诸如return'hello'之类的简单操作时，管道成功返回并在html上显示数据，因此我认为页面链接不正确不是问题。

Dashboard.html

  <ion-card-content *ngFor = "let step of stepNumber | dateDescend">
    <p>Date: {{step.date}}</p>
    <p>Steps: {{step.steps }}</p>
  </ion-card-content>

date-descend.ts

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

@Pipe({
  name: 'dateDescend',
})
export class DateDescendPipe implements PipeTransform {
  transform(array: Array<string>, args: string) {
  console.log('array', array)
  setTimeout(() => {
      array.sort((a: any, b: any) => {
        if (a.date < b.date) {
          return -1;
          console.log('here1')
        } else if (a.date > b.date) {
          return 1;
          console.log('here2')
        } else {
          return 0;
          console.log('here3')
        }
      });
      console.log('FinalArray', array)
      return array;
      }, 3000);
    }
}

console.log（'FinalArray'，array）返回

0 {steps: 67, date: "July 12, 2018"}
1 {steps: 8, date: "July 13, 2018"}
2 {steps: 9, date: "July 14, 2018"}
3 {steps: 89, date: "July 15, 2018”}
4 {steps: 67, date: "July 18, 2018"}

Answer 1

问题就在这里

setTimeout(() => {
      array.sort((a: any, b: any) => {
        if (a.date < b.date) {
          return -1;
          console.log('here1')
        } else if (a.date > b.date) {
          return 1;
          console.log('here2')
        } else {
          return 0;
          console.log('here3')
        }
      });
      console.log('FinalArray', array)
      return array;
      }, 3000);
    }

请注意，您传递给setTimeout的参数是一个函数。因此，您的return语句将简单地返回到setTimeout的执行，而不是从transform函数返回，更不用说setTimeout异步运行您的函数了，在您的情况下，我认为没有任何理由。删除它并将代码放在外面，它应该可以正常工作。

管道成功排序和记录数据，但未在html中显示

1 个答案: