Question

我正在订阅正在制作和API调用的方法。在订阅主体内部，我按以下方式将接收到的数据分配（第一次分配并第二次修改对象）：

this.serviceObj.getData()
  .subscribe(
  data => {
    this.DataObj = {
      ..... some content .....
    }
    this.anotherFunction();
  },
  error => {
    console.log('error');
  },
  );

在订阅正文中，一旦我收到数据，我就将其分配给＆＃34; DataObj＆＃34;，并且在DataObj具有新数据之后，它将在UI中呈现。我想＆＃34; anotherFunction（）＆＃34;在＆＃34; dataObj＆＃34;之后执行已分配新数据并在UI中呈现。但看起来数据的分配成功但是＃34; anotherFunction（）＆＃34;在UI中成功呈现新数据之前执行。

我尝试使用：

ngAfterViewChecked() {
  this.anotherFunction();
}

＆＃34; anotherFunction（）＆＃34;如果我将它放在ngAfterViewChecked（）中，则在视图更改后执行，但即使模板中有微小的更改，这也会继续执行，但我只希望它在＆＃34; DataObj＆＃34;改变了。

有什么建议我如何才能有效地完成这项工作？（不经常执行ngAfterViewChecked（））。

Answer 1

唯一想到的是基于“信号量”的方法。将标记dataReceived设置为false。在.subscribe中，将其设置为true。然后在ngAfterViewChecked()中仅在dataReceived为真时运行代码。

ngAfterViewChecked() {
  if (this.dataRetrieved) {
     this.anotherFunction();
     this.dataRetrieved = false;
  }
}

我不喜欢“基于旗帜”的方法。但这是解决这个问题的唯一想法。也许其他人有更好的解决方案？

Answer 2

管道怎么样？

它在渲染之前运行，您可以调用anotherFunction

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'anotherFunction'})
export class AnotherFunctionPipe implements PipeTransform {

  transform(value: any): number {

    anotherFunction();

    return value;
  }

  anotherFunction() {
     // do something  
  }

}

用法就是这样的

<div> {{ DataObj | anotherFunction }} </div>

在模板中呈现数据后调用函数：Angular2

2 个答案: