將布爾值更改為角度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>