简体   繁体   中英

How to perform CRUD operations in Ionic-3?

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:

  • You to have all logic in one place (usually a service that gets called)
  • You will then need to create storage service that is actually going to store the data whether it be local storage like in the tutorial or a database. I would suggest sticking with local storage until you have things figured out
  • Read up on promises , they are your friend.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM