如何在模板中没有函数的情况下使用 *ngFor 循环格式化模板中的数据？答案

【问题标题】：How do I format data in a template using a *ngFor loop without having functions in the template?如何在模板中没有函数的情况下使用 *ngFor 循环格式化模板中的数据？
【发布时间】：2021-03-17 20:23:33
【问题描述】：

使用 Angular 11，我有一个从其他地方接收数据数组的组件。我想使用带有自定义格式的*ngFor 循环在模板中显示数据。理想情况下，我会使用函数来格式化数据，但在模板中使用函数会导致性能问题。在带有*ngFor 循环的模板中格式化数据的最佳方法是什么？

例如，此模板有效，但未使用最佳做法。（注意：格式只是一个例子。我正在寻找一个通用答案，而不是 DatePipe 解决方案）

class UserExample {
    id: number;
    name: string;
    loginTime: Date;
}

@Component({
    template: `
        <div *ngFor="user of userData; trackBy: trackRow">
            <h1>Name: {{ user.name }}</h1>
            <p>Hours: {{ getHours(user.loginTime) }}</p>
            <p>Milliseconds: {{ getMilliseconds(user.loginTime) }}</p>
        </div>
    `
})
export class ExampleComponent {
    @Input() userData: UserExample[] = [];

    public getHours(loginTime: Date): string {
        return loginTime.getHours().toString();
    }

    public getMilliseconds(loginTime: Date): string {
        return loginTime.getMilliseconds().toString();
    }

    public trackRow(index: number, item: UserExample): number {
        return item.id;
    }
}

【问题讨论】：

标签： angular angular-template

【解决方案1】：

您可以使用 Angular 的 DatePipe。试试下面的代码：

@Component({
      template: `
        <div *ngFor="let user of userData; trackBy: trackRow">
          <h1>Name: {{ user.name }}</h1>
          <p>Hours: {{ user.loginTime | date: "hh" }}</p>
          <p>Milliseconds: {{ user.loginTime | date: "SSS" }}</p>
        </div>
      `
    })

【讨论】：

【解决方案2】：

您可以使用变量并将它们分配给函数，然后在模板中使用这些变量。像这样的：

@Component({
    template: `
        <div *ngFor="user of userData; trackBy: trackRow">
            <h1>Name: {{ user.name }}</h1>
            <p *ngIf="loginHours">Hours: {{ loginHours }}</p>
            <p *ngIf="loginMilliSeconds">
               Milliseconds: {{ loginMilliSeconds }}
            </p>
        </div>
    `
})
export class ExampleComponent {
    @Input() userData: UserExample[] = [];

   public loginHours = getHours(userData.loginTime);

   public loginMilliSeconds = getMilliseconds(userData.loginTime);

     getHours(loginTime: Date): string {
        return loginTime.getHours().toString();
     }
     getMilliseconds(loginTime: Date): string {
        return loginTime.getMilliseconds().toString();
     }

     public trackRow(index: number, item: UserExample): number {
        return item.id;
     }
}

【讨论】：

【解决方案3】：

您可以创建一个Pipe，您可以使用它来执行模板中的任何功能

@Pipe({name: 'execute'})
export class ExecutePipe implements PipeTransform {

  transform(fn: (...args: any[]) => any, ...args: any[]): any {
    return fn(...args);
  }

}

这个管道的第一个参数是函数，其余的都是函数的参数

<p>Hours: {{ getHours | execute: user.loginTime }}</p>
<p>Milliseconds: {{ getMilliseconds | execute: user.loginTime }}</p>

这个管道是纯的，所以它只会在它的一个参数改变时才会被执行

【讨论】：