将布尔值更改为角度2客户端中的文本

Question

详情

我试图从api获取数据并在列表中显示包含status属性，该属性返回true或false值但我想在客户端显示Active或Block而不是this。 我怎样才能在角度2中实现这一点。

Answer 1

我建议根据布尔值返回活动或阻塞的管道。

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

@Pipe({name: 'activeBlocked'})
export class ActiveBlockedPipe implements PipeTransform {
    transform(value) {
        return value ? 'Active' : 'Blocked';
    }
}

然后你可以在你的组件模板中使用它：

{{value | activeBlocked}}

在我看来，这是最容易重用的。

Answer 2

我怎样才能在角度2中实现这一点

只需使用javascript / typescript：

const valueFromServer = false; // Assuming
const toShow = valueFromServer ? 'Active' : 'Blocked';

Answer 3

您可以直接在视图中执行此操作：

<td>{{user.IsActive && 'Active' || 'Block'}}</td>

Answer 4

简单的方法是在td元素中使用条件运算符

<td>{{user.status ? 'Active' : 'Block'}}</td>