Which function to call for sending a put request to my server?

[fOO223Fr]

Please help!! I was wondering which method to call or rather how do i send a put request which is implemented in BookService as a method called updateBook() which accept an array I have tried to a demo on your existing demo here I keep getting error when trying to access datasourceSubject you see the error in the console of the demo.

// Stable Material table implementation.
export class BooksTableComponent implements onInit {
   dataSource: TableDataSource<Book>;
@Output() bookListChange = new EventEmitter<Book[]>();
   displayedColumns = ['title', 'author', 'publisher', 'publishedDate', 'isbn', 'price', 'actionsColumn'];

   constructor(private bookService: BookService, private bookValidator: ValidatorService) {}

   ngOnInit() {
     this.bookService.getBooks().subscribe(
       (data) => {
         this.dataSource = new TableDataSource<Book>(data, Book, this.bookValidator);
       }
     );
this.dataSource.datasourceSubject.subscribe(
      (data) => {
        this.bookListChange.emit(data);
        console.log(data);
      }
   }
 }

[irossimoline]

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.

[Metform]

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

[irossimoline]

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

Regards

[irossimoline]

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.