javascript - 如何仅在OnInit之后启动iterableDiffer?

标签 javascript angular typescript

我的问题是,当我只从数据库中初始化数据时,iterableDiffer 检测到更改。我不想进行第一次更改检测。我只想在用户编辑数组时获得更改检测。

我尝试将数据库请求放入构造函数中。没有改变任何东西。


  constructor(
    private route: ActivatedRoute,
    private StoreService: StoreService,
    private iterableDiffers: IterableDiffers
  ) {
     this.iterableDiffer = 
       this.iterableDiffers.find([]).create(null);
  }

  myArray: MyClass[] = [];

  iterableDiffer: IterableDiffer<unknown>;

  ngOnInit() {
    const id = this.route.snapshot.params.id;
    this.StoreService.getData(id)
       .subscribe(data => this.myArray = data);
    // on this subscribe, the Differ falsely gets triggered
  }

  ngAfterViewChecked() {
    const changes = this.iterableDiffer.diff(this.myArray);
    if (changes) {
      changes.forEachAddedItem((record: IterableChangeRecord<MyClass>) => {

        console.log('Added Changes detected');

        this.StoreService.addToDatabase(record.item);
      });
    }
  }

  // gets called by User Click, here i want to have the Differ called
  // This works fine
  addElmt(elmt: MyClass) {
    this.myArray.push(elmt);
  }

代码片段是真实代码的简化版本。我无法在函数 addElmt() 中调用 StoreService.addToDatabase()。这只是为了更好的解释。

感谢您的帮助!

最佳答案

总是可以有一个变量“myObserver”并执行

myObserver:any=null
ngAfterViewChecked() {
    const changes = this.iterableDiffer.diff(this.myArray);
    if (changes) {
      changes.forEachAddedItem((record: IterableChangeRecord<MyClass>) => {

        console.log('Added Changes detected');

        this.StoreService.addToDatabase(record.item);
      });
    }
    if (!myObserver)
    {
      const id = this.route.snapshot.params.id;
      myObserver=this.StoreService.getData(id)
         .subscribe(data => this.myArray = data);
    }
}

关于javascript - 如何仅在OnInit之后启动iterableDiffer?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57689781/

相关文章:

javascript - 如何让cloudantDb.search返回所有记录而不是限制25条和书签

css - 动态创建组件的 Angular 2 位置

angular - 类型 'boolean' 不可分配给类型 'ObservableInput<{}>'

css - 无法以 Angular 更改封装类

javascript - 如何在 typescript 项目中导入js文件?

javascript - Typescript 错误引用 _this

javascript - 如何通过查看源代码来区分 typescript 和 javascript?

javascript - 从 DOM 中删除

javascript - 使用 Electron 和 node.js 应用程序的 easy-ftp 中的文件上传错误

javascript - 使用 typescript 正确导入 FlatBuffers