Comments (4)
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.
Related Issues (20)
- Warning message Ngmodel is getting deprecated HOT 5
- How to get the current data in TableDataSource? HOT 1
- createNew function HOT 4
- Not an Issue - HTTP interceptor Conflict with keycloak-angular HOT 1
- How to create a method in component of row.confirmEditCreate() HOT 2
- Issue with node_modules with in angular4-material-table package HOT 2
- TypeError: undefined is not an object (evaluating 'this.dataKeys.reduce') HOT 1
- Release for Angular 7 HOT 1
- Conflict with rendere 3 in node_modules HOT 3
- extending MatTableDataSource instead DataSource HOT 1
- Upgrade to angular 7 to angular 8 HOT 3
- Date picker edit field doesn't fit in the cell
- ERROR TypeError: Class constructor DataSource cannot be invoked without 'new' HOT 5
- error TS2416: Property 'connect' in type 'TableDataSource<T>' is not assignable to the same property in base type 'DataSource<TableElement<T>>'. HOT 18
- Build errors after updating to 0.8.0 HOT 1
- Cannot overwrite row.currentData HOT 1
- Upgrade to Angular 9 HOT 1
- p-autocomplete shows focus on second tab click
- Nested Properties for sortingDataAccessor
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular4-material-table.