I want to know how to insert the data from the user in the form of from and perform the crud app with the jsonserver how can I do it.is my rest.ts file
// page with the api
public getProducts(): Observable<any> {
return this.http
.get(this.baseUrl + '/products')
}
This is my list.ts file
//page to shown
onCreateProduct(product)
{
console.log(this.product);
this.restProvider
.createProduct(product)
.subscribe(
(newProduct) => {
this.products=this.product.push(newProduct);
this.products = this.products.concat(newProduct);
}
);
}
This is my list.html file
//page with the form handling
<form (ngSubmit)="onCreateProduct(product)" #product="ngForm" class="list-form">
<table>
<tr>
<td>Enter name</td>
<td>
<ion-input [(ngModel)]="product.name" class="form-control" name="name" type="text" #name="ngModel">
</ion-input>
</td>
</tr>
<tr>
<td>Enter cost</td>
<td><ion-input[(ngModel)]="product.cost" class="form-control" name="cost" type="text" #cost="ngModel">
</ion-input>
</td>
</tr>
<tr>
<td colspan="2">
<button ion-button >CREATE</button>
</td>
</tr>
</table>
</form>
<br/>
</div>
<h3>Product Details</h3>
<table>
<tr>
<th> Id</th>
<th>Product_name</th>
<th>Product_cost</th>
<th></th><th><th></th>
</tr>
<tr *ngFor="let product of products" >
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.cost}}</td>
<button ion-button (click)="onEditProduct(product)">Edit </button>
</td>
<td>
<button ion-button (click)="onRemoveProduct(product)">Delete </button>
</td>
<td>
<button ion-button (click)="onUpdateProduct(product)">UPDATE </button>
</td>
</tr>
</table>
You can't expect someone to implement the entirely of your CRUD application for you. I would suggest you give the Ionic Academy a look to start off from.
Some guidelines:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.