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

Question

使用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;
}
}

Answer 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>
`
})

Answer 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;
}
}

Answer 3

您可以创建一个Pipe，用于执行模板中的任何函数

@Pipe({name: 'execute'})
export class ExecutePipe implements PipeTransform {
transform(fn: (...args: any[]) => any, ...args: any[]): any {
return fn(...args);
}
}

这个Pipe的第一个参数是函数，其余的是函数的参数

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

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