角材料：添加新行而不刷新表

Question

在我的项目中，我将Angular6用于角材料设计。在我的表中，我必须在不刷新整个表的情况下将新数据行添加到现有表中。 这是我到目前为止尝试过的，

issue-data.component.ts

export class IssueDataComponent implements OnInit {

  addStatus() {
    const dialogConfig = new MatDialogConfig();

    this.modelData = {
      list: this.IssueDataDTOList,
      type: "add",
      toBeEditedDTO: null
    }

    dialogConfig.data = this.modelData;
    dialogConfig.disableClose = true;//disable default close operation
    dialogConfig.width = '30%';

    this.dialog.open(EditIssueDataComponent, dialogConfig).afterClosed().subscribe(
      res => {
        //updating data source array
        this.updatingDataSource(res);
      }
    )
  }

  updatingDataSource(result) {
    this.dataSource = new MatTableDataSource(result);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

}

edit-issue-data.component.ts

export class EditIssueDataComponent implements OnInit {

  statusForm: FormGroup;
  IssueDataDTOList = [];
  statusArray: string[] = ['Active', 'Inactive'];
  isStatusExist = false;
  dataFromParent = { list: [], type: '', toBeEditedDTO: { id: 0, name: '', backlog: '', status: '' } };

  constructor(private matDialogRef: MatDialogRef<DefineCalenderComponent>,
    private formBuilder: FormBuilder,
    private issueService: IssueService,
    private snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<any>,
    @Inject(MAT_DIALOG_DATA) public data: any, ) {
  }

  ngOnInit() {
    this.dataFromParent = this.data;
    this.IssueDataDTOList = this.dataFromParent.list;
      this.statusForm = new FormGroup({
        name: new FormControl('', [Validators.required]),
        backlog: new FormControl('', [Validators.required]),
        // status: new FormControl('', [Validators.required]),
      });
  }

  addStatus() {
    const IssueDataDTO = {};
      IssueDataDTO['name'] = this.statusForm.value.name;
      IssueDataDTO['backlog'] = this.statusForm.value.backlog;
      IssueDataDTO['status'] = "ACTIVE";

    this.issueService.updateIssueData(IssueDataDTO).subscribe(res => {
      this.IssueDataDTOList.push(res);
      this.cancelPopup();
    }
    );
  }

以下是我的服务类别，

export class IssueService {
    public statusesId; 
    private apiURL = environment.apiUrl;


    constructor(private http: HttpClient) {
    }

    issueDataForm: FormGroup = new FormGroup({
        statusesId: new FormControl(-1), 
        issueStatus: new FormControl('', Validators.required),
        showInBacklog: new FormControl(''),
        status: new FormControl('')
      });
 issueStatusDTOList= [];
UpdateStatus(data): Observable<any> {
        return this.http.post<any>(this.apiURL + 'saveStatus', data);
      }}

但是当我尝试添加新数据时，结果如下：

所有数据都消失了，屏幕上仅显示我最近添加的数据。

Answer 1

请求更新后，您需要请求更新的数据

 updatingDataSource(result) {
    this.dataSource = new MatTableDataSource(result);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    requestForNewDataSourceFnc()
  }

Answer 2

不需要

  

this.dataSource =新的MatTableDataSource（result）;   this.dataSource.paginator = this.paginator; this.dataSource.sort =   this.sort;

使用

this.dataSource.data.push(result);
this.dataSource._updateChangeSubscription();

Answer 3

尝试不要在更新时创建新的'com.facebook.android:facebook-android-sdk:[5,6)' ，而是将新数据添加到现有数据中。像这样：

MatTableDataSource