Which function to call for sending a put request to my server?
Closed this issue · 4 comments
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);
}
}
}
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.
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
Hi @Metform, please share your code on stackblitz so I can help you with it.
Regards
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.