角度[隐藏]不起作用

Question

I have userPermission() function that works correctly, but component app-chat that depends on it always shows, even if userPermission() return false.

home.ts file

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 file:

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

I also wrote

[hidden] {
  display: none;
}

But this doesn't work.

Answer 1

应该是这样

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

Answer 2

I think there could be a problem with the type of the response. Try to compare with == 'true' or === 'true' etc. I had such issues a time ago.

The problem could be: when 'false' is a string, it will return true (as string always returning true). In your case you are comparing to !true and that will be false .

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

Maybe I´m wrong, but it could be an issue. Else provide an example in jsfiddle or similar.

Update

Try to do the asych on the params inside the function if this are your observables

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

Update2

Seem your vars are whether an Observable or return of an Promise you should use

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

without asynch. As you can see in your error message it is returning 'true' as wrong param for the pipe asynch.

Answer 3

You want to apply an attribute conditionally.

You have to assign a value to make the attribute appear on the DOM element, and assign undefined to remove it from the DOM element.

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

Personally, I don't like this approach. It's easier to just use CSS classes.

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

CSS

.hidden { display: none }

FYI : async is for observables and promises only.