Which function to call for sending a put request to my server? about angular4-material-table HOT 4 CLOSED

Hi @fOO223Fr,

I've checked the demo, and the problem seems to be that you aren't creating the table before trying to access it.

To be more clear, let's analyze your ngOnInit method:

ngOnInit() {
     // You are here subscribing to a remote service, which is async.
     this.bookService.getBooks().subscribe(
       (data) => {
         // After you receive the http call answer, you are creating the datasource.
         this.dataSource = new TableDataSource<Book>(data, Book, this.bookValidator);
       }
     );

// This code executes right after the http call, so you can't be sure your http answer has been accordingly handled, so your dataSource won't be defined here yet.
this.dataSource.datasourceSubject.subscribe(
      (data) => {
        this.bookListChange.emit(data);
        console.log(data);
      }
   }

A way to solve it could be subscribing to the datasourceSubject right after instantiating it, moving your this.dataSource.daasourceSubject.subscribe(...) right after this.datasource = .... Not sure if it is the cleanest solution, but will work.

Regarding the main question, I'm not sure I'm getting your problem clearly. If you want to make a http POST/PUT request before inserting/updating a table row element, from your trigger in the html you will have to call a custom component method which receives the row, and there you could do anything you want with that data.

Example:

<mat-table class="table-margin-bottom" #table [dataSource]="dataSource">
  <ng-container matColumnDef="col1">
    <!-- Column definiton -->
  </ng-container>
  <!-- More columns definition could be placed here -->

  <ng-container matColumnDef="actionsColumn">
     <!-- More actions could be placed here -->
    <mat-cell *matCellDef="let row">
      <!-- The classic solution is (click)="row.confirmEditCreate(), but you can invoke a component's method passing as parameter the row -->
      <button *ngIf="row.editing" (click)="confirmEditOrCreateWithHttpCall(row)">
            Confirm edition or creation
    </button>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

And in your component:

import { TableElement, ... } from 'angular4-material-table';

export class BooksTableComponent implements OnInit {
   // ... Additional component definition

  confirmEditOrCreateWithHttpCall(row: TableElement<Book>) {
    // Here you can validate the row, and make the http call to create/update the element.
  }
 }

As a comment, the implements OnInit part of your code has the initial letter on lower case (onInit), not sure if that is absolutely right.

Tell me if you have any additional question.

from angular4-material-table.

irossimoline, thank you so much, I could not solve this problem for 5 days, I tried to place "this.dataSource = new TableDataSource (data, Book, this.bookValidator); in the setTimeOut function to simulate the delay for server response, but it did not work. Thank you once again for creating such a useful lib mostly for people like me

from angular4-material-table.

Hi @Metform, please share your code on stackblitz so I can help you with it.

Regards

from angular4-material-table.

Hi @Metform,

I'll close this issue as we didn't receive any update from you.
Please if you still have the issue, or you have any other question, please feel free to open a new issue.

Regards.

from angular4-material-table.