CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-material
benmessi12040
benmessi12040

Reputation: 53

Cannot pass information from DataSource to TypeScript?

I am using mat-table to generate a table with two columns, one with an ID and another that is a checkbox with a button at the top. There are 15 rows of data.

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" (click)="reprocessHomeProcesses(execution)" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution">
         <mat-checkbox class="checker"></mat-checkbox>
      </mat-cell>
   </ng-container>
</mat-table>

In my typescript function I'm literally just trying to print it before anything else. This won't work.

reprocessHomeProcesses(exe) {
    console.log(exe)
  }

However, it does display on the screen with {{execution.process}}

Basically, when an item is checked, I want its corresponding process information to be passed back to TS to make an API call. However, I cannot pass execution from HTML no matter what I try.

Above you can see I'm trying to pass execution directly, however this returns undefined. To start I would just like to be able to pass the execution information back to TS. After that I'd like to be able to select as many processes as needed using the checkboxes and then pass them to TS to be called with an API.

Is there a reason I cannot print execution? Why am I able to view it perfectly in the HTML but I cannot print it to console via TS? What can I do?

Upvotes: 0

Views: 179

Answers (1)

vsnikhilvs
vsnikhilvs

Reputation: 576

matHeaderCell does not have any data.

matCell has the data. Notice the let execution.

You can do the same click function inside matCell.

Upvotes: 1

Related Questions