How do I add a custom column to angular material table?

问题

Currently, I have 4 columns in my data source. I want to perform some operations from the data I receive from one of the columns, and then add that data to a new column in the table. Is there any way to do that?

回答1:

You could make changes in data before setting it to dataSource. For example, if you get some http data as observable, you could do:

this.data$ = this.certificateService.certificates$.pipe(
        map(data => {
          data.column5 = data.column4 // and make all other calculations
          return data;
       })
);

Then you could subscribe on data and set it in datasource

 this.data$.subscribe(data => {
   this.dataSource = new MatTableDataSource(data)
 })

来源：https://stackoverflow.com/questions/60414162/how-do-i-add-a-custom-column-to-angular-material-table