角度 [隐藏] 不起作用

Question

我有正常工作的userPermission((函数，但是依赖于它的组件应用程序聊天总是显示，即使userPermission((返回false。

首页.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;
}
}

首页.html文件：

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

我也写了

[hidden] {
display: none;
}

但这行不通。

Answer 1

您希望有条件地应用属性。

您必须分配一个值以使该属性显示在 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仅用于可观察量和承诺。

Answer 2

它应该是这样的，

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

Answer 3

我认为响应的类型可能存在问题。尝试与== 'true'或=== 'true'等进行比较。我前段时间遇到了这样的问题。

问题可能是：当"false"是一个字符串时，它将返回true(因为字符串总是返回true(。在您的情况下，您正在与!true进行比较，这将是false.

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

也许我错了，但这可能是一个问题。否则在 jsfiddle 或类似文件中提供一个示例。

更新

如果这是您的可观察量，请尝试对函数内的参数执行 asych

userPermission( (channel | asynch), (channelId | asynch)

更新2

似乎您的变量是您应该使用的可观察或承诺的返回

[hidden]="!userPermission(channel, channelId)"

没有异步。正如您在错误消息中看到的那样，它返回'true'作为管道异步的错误参数。

Answer 4

您应该在 html 文件中尝试使用 CSS 属性"visibility"。 一般情况是：

<div [style.visibility]="'visible'"></div>

或

<div [style.visibility]="'hidden'"></div>

通过将其与您的示例一起使用，这应该可以工作：

<app-chat [style.visibility]="!userPermission(channel, channelId) ? 'visible' : 'hidden'"></app-chat>