在Angular上更新mat-table

Question

我需要在database.My表单上插入数据后更新mat表，并且mat表在同一页中。从表单我插入数据到数据库。在数据库上插入成功。但是我的垫子表没有更新。如果我刷新页面，则mat-table将被更新。但我需要在将数据插入数据库后进行mat-table更新。

Spring服务

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

您可以使用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
  }
}

您可以在this page上看到一个示例

Answer 2

只需在getClubList()方法中进行以下更改：

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

Answer 3

在您app.component.ts中尝试以下代码，

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