时间戳

首页 > 解决方案 > 如何在模板中显示来自管道的数据？

angular - 如何在模板中显示来自管道的数据？

问题描述

我有一个数组：

let arr = [{id: 1, name: "G"...}, {id: 2, name: "H"...}, {id: 3, name: "O"...}];

还有一个模板 HTML，我需要在其中应用管道getTopUser：

<ng-container getTopUser as user>
<div class="top_user">
   <div class="name">{{user.name}}</div>
   <div class="age">{{user.age}}</div>
</div>

<div class="top_user_additional">
    <div class="remark">{{user.remark}}</div>
</div>
</ng-container>

所以我需要应用管道来阻止，如何正确地做到这一点？

管道是：

@Pipe({
    name: 'applicanttypename',
})
export class TopUserPipe implements PipeTransform {
    transform(user: User[]): string {
         return user[0];
}

标签： angular

解决方案

将它与ngIf指令相结合，您可以分配一个局部变量以在容器内使用：

<ng-container *ngIf="users | getTopUser; let user">
<div class="top_user">
   <div class="name">{{user.name}}</div>
   <div class="age">{{user.age}}</div>
</div>

<div class="top_user_additional">
    <div class="remark">{{user.remark}}</div>
</div>
</ng-container>

users是在您的组件中定义用户的数组。另请注意，您的管道名称是 currentapplicanttypename而不是getTopUser。并确保您的管道将处理输入数组未定义或为空的情况。

正如@yash 提到的，您也可以使用users | getTopUser as user.

推荐阅读