Question

无论何时从loans.component.ts提交新的贷款，我都希望更新loan-form.component.ts中的数据源。

所以在loan-form.component.ts中，当表单提交时我被称为

onSubmit() {
  var config = {
    headers : {
        'Content-Type': 'application/json;charset=utf-8;'
      }
    }
    this.http
      .post(this.getHostUrl(), JSON.stringify(this.model), config).subscribe();
    this.loanAdded.emit(true);
}

哪里

@Output() loanAdded : EventEmitter<boolean> = new EventEmitter<boolean>();

然后在loans-component.ts我有

@Input()
set refreshData (value: boolean) {        
    this.refresh();
}

哪里

refresh() {
    console.log('refresh');
    this.getLoans().subscribe((loans) => {
        this.loans = loans;
        this.dataSource = new MatTableDataSource(loans);
        this.dataSource.sort = this.sort;
        this.changeDetectorRefs.detectChanges();
    });
}

这是一种的工作方式，但它非常断断续续。

在Firefox和Edge中，它适用于第二次提交，然后此后似乎是随机的
在Chrome中，它始终运行

我也尝试添加以下内容：

ngOnChanges(changes: SimpleChanges): void {
    this.refresh();
}
ngOnInit() {
    this.refresh();
}
ngAfterViewInit() {
    this.refresh();
}

当我提交表单时，我可以在控制台中看到refresh被调用了3次，但是网格并不总是得到更新...

我也有这种方法来删除行然后更新，并且效果很好：

removeSelectedRows() {
    this.selection.selected.forEach(item => {
        // console.log(item);
        this.http.delete(this.getHostUrl() + '/' + item.Id).subscribe();
    });
    this.ngOnChanges(null);
    this.refresh();
    this.selection = new SelectionModel<Loan>(true, []);
}

有人能指出我正确的方向吗？

Answer 1

问题在这里：

onSubmit() {
  var config = {
    headers: {
      'Content-Type': 'application/json;charset=utf-8;'
    }
  }
  this.http
    .post(this.getHostUrl(), JSON.stringify(this.model), config).subscribe();
  this.loanAdded.emit(true);
}

this.http.post本质上是异步的，而this.loanAdded.emit是同步的。

this.loanAdded.emit将在您获得this.http.post的响应之前运行。因此，要解决此问题，请在this.loanAdded.emit块中写入subscribe。像这样：

onSubmit() {
  var config = {
    headers: {
      'Content-Type': 'application/json;charset=utf-8;'
    }
  }
  this.http.post(this.getHostUrl(), JSON.stringify(this.model), config)
    .subscribe(() => this.loanAdded.emit(true));
}

有了这个，您只有在收到POST呼叫的响应后才会发出信号。因此，您可以确保后端的DATA已更新。

使用@Input属性

1 个答案: