时间戳

首页 > 解决方案 > 角 [隐藏] 不起作用

javascript - 角 [隐藏] 不起作用

问题描述

我的 userPermission() 函数可以正常工作，但依赖于它的组件 app-chat 始终显示，即使 userPermission() 返回 false。

home.ts 文件

async userPermission(channel, channelId) {
    if (channel === undefined) {
        return false;
    } else if (channelId && channel.status === 'open') {
        return true;
    } else if (channelId && channel.status === 'private' && await this.inChannel(channelId)) {
        console.log('private have permission');
        return true;
    } else {
        return false;
    }
}

home.html 文件：

<app-chat [hidden]="!userPermission(channel, channelId) | async" [channelId]="channelId" [channel]="channel"></app-chat>

我也写了

[hidden] {
  display: none;
}

但这不起作用。

标签： javascriptangular

解决方案

您想有条件地应用属性。

您必须分配一个值以使该属性出现在 DOM 元素上，并分配undefined以将其从 DOM 元素中删除。

<app-chat [attr.hidden]="!userPermission(channel, channelId) ? true : undefined" [channelId]="channelId" [channel]="channel"></app-chat>

就个人而言，我不喜欢这种方法。只使用 CSS 类更容易。

<app-chat [class.hidden]="!userPermission(channel, channelId)" [channelId]="channelId" [channel]="channel"></app-chat>

CSS

.hidden { display: none }

仅供参考：async仅适用于可观察对象和承诺。

推荐阅读