Question

我正在将asyncPipe与*ngIf装饰器一起使用，该装饰器自动订阅/取消订阅Observable，该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);
    }
}

我已经测试了该问题是否是可多次执行的Observable，但是它只运行了一次。然后认为ng-container中的代码是问题所在，但也只能运行一次。

该问题与this不同，因为我不是在问它是否可取，而是在解决问题。实际上，这应该起作用。但是由于Angulars changeDetection体系结构，它不能与Observables一起使用，它甚至在本文things you didn't know about the 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
 })
}

asyncPipe中的方法多次运行

1 个答案: