Question

我想知道如何以from的形式插入用户的数据，并使用jsonserver执行crud应用程序。我的rest.ts文件是

    // page with the api 
    public getProducts(): Observable<any> {
      return this.http
      .get(this.baseUrl + '/products')
    }

这是我的list.ts文件

//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);
        }
      );
    }

这是我的list.html文件

 //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>

Answer 1

您不能指望有人为您实现整个CRUD应用程序。我建议您从Ionic Academy看一下。

一些准则：

您将所有逻辑放在一个地方（通常是被调用的服务）
然后，您将需要创建实际上将用于存储数据的存储服务，而不管它是教程中的本地存储还是数据库中的。我建议您坚持使用本地存储，直到您发现所有问题为止
Read up on promises，他们是你的朋友。

如何在Ionic-3中执行CRUD操作？

1 个答案: