Как передать результат асинхронной функции в угловой шаблон

Question

У меня есть разрешение асинхронной функции (), которое работает нормально, но я не знаю, как передать результат этой функции в угловой шаблон.

У меня есть этот код .ts файл:

async havePermission(channelId) {
        console.log('is private' + ' ' + await this.isPrivateChannel2(channelId));
        console.log('in channel' + ' ' + await this.inChannel(channelId));
        if (await this.isPrivateChannel2(channelId) && !(await this.inChannel(channelId))) {
            console.log('no permission');
            return false;
        } else {
            console.log('have permission');
            return true;
        }
    }

    async permission(channelId) {
        return await this.havePermission(channelId);
    }
}

И это часть моего шаблона:

<app-chat *ngIf="permission(channelId)" [channelId]="channelId"></app-chat>

компонент app-chat всегда отображается, даже если разрешение возвращает false, почему?

Answer 1

Чтобы связать результат этого promise (или любой асинхронной операции, тоже Observables) с вашим шаблоном, вам нужно использовать async трубу, например:

<app-chat *ngIf="permission(channelId) | async" [channelId]="channelId"></app-chat>

Для получения дополнительной информацииВы можете проверить документацию:

https://angular.io/api/common/AsyncPipe