将布尔值更改为角度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>