问角质材料:垫子表有时实时更新，有时不更新。
EN

Stack Overflow用户

提问于 2020-06-11 01:45:43

回答 3查看 749关注 0票数 5

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

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
      });
    });
  }

main.component.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();
}

有什么遗漏了吗？

angular

typescript

angular-material

angular9

mat-dialog

电商音视频处理解决方案

为电商客户场景提供短视频处理、音频加密处理等场景方案，提高客户效率和用户体验

回答 3

Stack Overflow用户

发布于 2020-06-13 04:48:13

将您的ngOnInit()和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，然后只更新数据。

票数 0

Stack Overflow用户

发布于 2020-06-14 03:04:54

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

票数 0

Stack Overflow用户

发布于 2020-06-14 23:21:46

根据您的代码，在submit () changeDetectorRefs ().Once从submit订阅后，juset在显示快餐店之前执行mat-table的& 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
          });
        });
      }