Question

我有正确运行的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;
}

但这不起作用。

Answer 1

应该是，

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

Answer 2

我认为回复的类型可能存在问题。尝试与== 'true'或=== 'true'等进行比较。我之前遇到过这样的问题。

问题可能是：当'false'是一个字符串时，它将返回true（因为字符串总是返回true）。在您的情况下，您要与!true进行比较，那将是false。

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

也许我错了，但这可能是一个问题。另外，在jsfiddle或类似的例子中提供了一个例子。

<强>更新

尝试在函数内部的params上执行asych，如果这是你的observables

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

<强> UPDATE2

看来你的vars是Observable还是你应该使用的Promise返回

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

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

Answer 3

您想要有条件地应用属性。

您必须分配一个值才能使该属性出现在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仅适用于观察和承诺。

Angular [隐藏]不起作用

3 个答案: