在Angular上更新Mat-table

Question

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

春季服务

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.ts

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

Appcomponent.html

Get-CMDeploymentStatus -DeploymentId $depID | Get-CMDeploymentStatusDetails  | Where DeviceName -eq $computername

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

在您的React.PureComponent中尝试以下代码，

app.component.ts

Answer 3

只需通过getClubList()方法进行这些更改：

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