Метод внутри asyncPipe запускается несколько раз

Question

Я использую asyncPipe с *ngIf декоратором, который автоматически подписывается / отменяет подписку на Observable, который возвращает object в пределах <ng-container>...</ng-container>.

Пока все хорошо, но внутри тега ng-container я хочу передать object в качестве аргумента методу doSomething(object).

Проблема в том, что метод запускается 5-8 раз?

HTML-шаблон

<ng-container *ngIf="(user$ | async) as user">
   {{  doSomething(user) }} <-- method executes multiple times
</ng-container

Файл TypeScript

class Component implements OnInit { 

    user: Observable<User>; 

    constructor() {}

    ngOnInit() {
        this.user$ = this.userService.getUser(id);
    }

    checkConfigs(object) {
        console.log(object);
    }
}

Я проверял, является ли проблема наблюдаемой, которая выполняется несколько раз, но запускается один раз. А потом подумал, что код в ng-container является проблемой, но он также запускается один раз.

Вопрос отличается от этого , потому что я не спрашиваю, желательно ли это, а как решить проблему. На практике это должно работать. Но из-за архитектуры Angles changeDetection она не работает должным образом с Observables, в этой статье даже указано вещей, которые вы не знали об AsyncPipe , как решить ее с помощью changeDetection: ChangeDetectionStrategy.OnPush.

Answer 1

вы можете изменить компоненты changeDetectionStrategy на onPush. после этого ваша функция doSomething не будет вызываться несколько раз. Таким образом, в основном она вызывает функцию всякий раз, когда обнаруживается изменение, поэтому она вызывается несколько раз, поэтому после изменения метода обнаружения этого не произойдет

Попробуйте это:

в вашем компоненте:

class Component implements OnInit { 
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush // this line
 })
}