Обновление мат-таблицы на Angular

Question

Мне нужно обновить таблицу mat после вставки данных в базу данных. Моя форма и таблица mat находятся на одной странице. Из формы я вставляю данные в базу данных. В базу данных он успешно вставлен но мой мат-стол не обновляется. Если я обновлю страницу, то mat-таблица будет обновлена. Но мне нужно сделать обновление таблицы матов после вставки данных в базу данных.

Spring Service

const: httpOptions = {
.......
}
export class SpringService {
  public getAllClubs(): any {
  return this.http.get(this.baseUrl+"/currentseason/get/clubs",httpOptions); 
  }
}

AppComponent.ts

expport class AppComponent implements OnInit {
clubdetails = new MatTableDataSource();
displayedColumns: string[] = [.....];
  ngOnInt() {
   this.getClubList();
  }
  getClubList() {
  this.springService.getAllClubs().pipe(
  ........
  ).subscribe(res => {this.clubdetails.data= res;});
  }

}

Appcomponent.html

<form (ngSubmit)="mymethod()">........</form>
<table mat-table [dataSource] = "clubdetails">
.............
</table>

Answer 1

В вашем app.component.ts попробуйте следующий код,

 getClubList() {
  this.springService.getAllClubs().pipe(
  ........
  ).subscribe(res => {this.clubdetails.data= res;
this.dataSource = new MatTableDataSource(this.Model_Obj_Name);});
  }

Answer 2

вы можете использовать объект BehaviorSubject <>, при этом вы вызываете следующую функцию для обновления элементов подписки, например:

@Component({selector:'my-component', templateUrl: './my-component.html', style:[]})
export class MyComponentComponent implements OnInit, OnDestroy {
  private dataObj = new BehaviorSubject<any>([]);
  private dataSubscription: Subscription;

  constructor(private http: HttpClient, springService: SpringService){

    // Subscribe with BehaviorSubject
    this.dataSunscription= this.dataObj
                               .asObservable()
                               .subscribe(res => this.clubdetails.data= res);

    this.refreshData(); // fill with first data
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {
    this.dataSubscription.unsubscribe();
  } 

  // Refresh the data, and call the next function of BehaviorSubject
  refreshData(){
    this.springService.getAllClubs()
        .toPromise()
        .then( dt => this.dataObj.next(dt));        
  }

  mymethod(){
    // Call your code

    refreshData(); // Refresh after post the data
  }
}

Вы можете увидеть пример на этой странице