angular - Angular Material：Mat Table 有时会实时更新，有时不会

Question

我有一个调用GET请求的垫表。另外我有一个 Mat 对话框，它接受数据和保存点击调用POST请求。一切正常，但有时在单击“保存”按钮后表格会更新，但有时不会（我必须重新加载页面并查看更新）。

mat-dialog.component.ts

onSubmit() {  // This method is called on the button click in Mat-Dialog
    if(this.formdata.invalid) {
      return;
    }
    this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => {
      this._snackBar.open('New Question Category Added Successfully', '', {
        duration: 7500,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition
      });
    });
  }

主要组件.ts

constructor(private adminCategory: AdminCategoryService, private fb: FormBuilder, public dialog: MatDialog) { 
    dialog.afterAllClosed.subscribe(() => {
      console.log(''); // This line gets called everytime on close of the modal
      this.getTableData(); // So this line also gets called but not re-render the template updated everytime
    });
}

openDialog() {
    this.dialog.open(CreateSectionModalComponent);
}

private getTableData() {
    this.columnsToDisplay = ['id', 'questionCategoryName', 'isActive', 'Action'];
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource = new MatTableDataSource<QuestionCategory>(this.QuestionCategoryData);
          this.dataSource.paginator = this.paginator;
        }, error => {
          console.log(error);
        });
}

ngOnInit() {
    this.getTableData();
}

有什么遗漏吗？

Answer 1

根据您的代码，在 submit() 之后没有更新 mat-table 的实现。一旦您从提交订阅，juset在显示小吃店之前从 Mat-table执行changeDetectorRefs & renderRows()

@ViewChild(MatTable, { static: true }) table: MatTable<any>;
constructor(private changeDetectorRefs: ChangeDetectorRef)

    onSubmit() {
        if(this.formdata.invalid) {
          return;
        }
        this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => 
         {

           this.changeDetectorRefs.detectChanges();
           this.table.renderRows();
          this._snackBar.open('New Question Category Added Successfully', '', {
            duration: 7500,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition
          });
        });
      } 

Answer 2

我从您的示例代码中看到的是您正在从对话框中添加新数据，然后在对话框关闭时再次获取表数据。但没有证据表明您的数据当时已保存。我建议不要在对话框代码中保存数据，而是在调用时将对话框中输入的数据返回给主组件，并在主组件中onSubmit调用this.adminService.createQuestionCategory()服务方法，然后getTableData()在内部调用subscribe. 这样您就可以确保在记录新数据后获取数据。

Answer 3

将您的ngOnInit()and更改getTableData()为此

ngOnInit() {
   this.columnsToDisplay = ['id', 'questionCategoryName', 'isActive', 'Action'];
   this.dataSource = new MatTableDataSource<QuestionCategory>();
   this.dataSource.paginator = this.paginator;
   this.getTableData();
}   

private getTableData() {
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource.data = this.QuestionCategoryData;
        }, error => {
          console.log(error);
        });
}

在这里，您正在初始化mat-table，然后只是更新数据。