Угловой [скрытый] не работает

Question

У меня есть функция userPermission (), которая работает правильно, но компонент app-chat, который зависит от него, всегда показывает, даже если userPermission () возвращает 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>

Я также написал

[hidden] {
  display: none;
}

Но это не работает.

Answer 1

Я думаю, что может быть проблема с типом ответа.Попробуйте сравнить с == 'true' или === 'true' и т. Д. У меня были такие проблемы некоторое время назад.

Проблема может заключаться в том, что когда false - это строка, она вернет true (как всегдавозвращая истину).В вашем случае вы сравниваете с !true, и это будет false.

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

Возможно, я ошибаюсь, но это может быть проблемой.Еще приведите пример в jsfiddle или аналогичном.

Обновление

Попробуйте выполнить асич для параметров внутри функции, если это ваши наблюдаемые

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

Обновление2

Похоже, ваши переменные являются ли Наблюдаемым или возвращением Обещания, которое вы должны использовать

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

без асинхронности.Как видно из сообщения об ошибке, он возвращает 'true' как неправильный параметр для асинхронизации канала.

Answer 2

Вы хотите применить атрибут условно.

Вам необходимо присвоить значение, чтобы атрибут появился в элементе 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 }

FYI : async только для наблюдаемых и обещаний.

Answer 3

должно быть как,

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