httpおよびobservablesでangular2を使用してjsonファイル内の製品を追加/更新/削除する

Question

http2およびobservablesでangular2を使用してjsonファイル内の製品/アイテムを追加/更新/削除する方法を教えてください。以下は私のコードです、GET Productsはうまくいきます。他人に

製品-list.component

export class ProductListComponent implements OnInit { 
pageTitle: string = 'Product List'; 
imageWidth: number = 50; 
imageMargin: number = 2; 
showImage: boolean = false; 
listFilter: string; 
errorMessage: string; 

products: IProduct[]; 

constructor(private _productService: ProductService) { 

} 

toggleImage(): void { 
    this.showImage = !this.showImage; 
} 

deleteItem() : void { 
    this._productService.deleteProduct(); 
} 
ngOnInit(): void { 
    this._productService.getProducts() 
      .subscribe(products => this.products = products, 
         error => this.errorMessage = <any>error); 
} 

product.service.ts

export class ProductService { 
private _productUrl = 'api/products/products.json'; 
private headers = new Headers({'Content-Type': 'application/json'}); 

constructor(private _http: Http) { } 

getProducts(): Observable<IProduct[]> { 
    return this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .do(data => console.log('All: ' + JSON.stringify(data))) 
     .catch(this.handleError); 
} 

deleteProduct(): Observable<IProduct[]> { 
    let id : number = 1;   
    return this._http.delete(`${this._productUrl}/${id}`) 
        .map((res:Response) => res.json()) 
        .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
} 

製品-list.component.html

<tbody> 
       <tr *ngFor='let product of products | productFilter:listFilter'> 
        <td> 
         <img *ngIf='showImage' 
          [src]='product.imageUrl' 
          [title]='product.productName | uppercase' 
          [style.width.px]='imageWidth' 
          [style.margin.px]='imageMargin'> 
        </td> 
        <td><a [routerLink]="['/product', product.productId]"> 
         {{product.productName}} 
         </a> 
        </td> 
        <td>{{ product.productCode | lowercase }}</td> 
        <td>{{ product.releaseDate }}</td> 
        <td>{{ product.price | currency:'USD':true:'1.2-2' }}</td> 
        <td> 
         <ai-star [rating]='product.starRating' 
           (ratingClicked)='onRatingClicked($event)'> 
         </ai-star> 
        </td> 
        <td> 
         <button class="delete"(click)="delete(product); $event.stopPropagation()">X</button> 
        </td> 
       </tr> 
      </tbody> 

を教えてください

JSONファイル

[ 
{ 
    "productId": 1, 
    "productName": "Leaf Rake", 
    "productCode": "GDN-0011", 
    "releaseDate": "March 19, 2017", 
    "description": "Leaf rake with 48-inch wooden handle.", 
    "price": 19.95, 
    "starRating": 3.2, 
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png" 
}, 
{ 
    "productId": 2, 
    "productName": "Garden Cart", 
    "productCode": "GDN-0023", 
    "releaseDate": "March 18, 2017", 
    "description": "15 gallon capacity rolling garden cart", 
    "price": 32.99, 
    "starRating": 4.2, 
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png" 
}, 
{ 
    "productId": 5, 
    "productName": "Hammer", 
    "productCode": "TBX-0048", 
    "releaseDate": "May 21, 2017", 
    "description": "Curved claw steel hammer", 
    "price": 8.9, 
    "starRating": 4.8, 
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png" 
}, 
{ 
    "productId": 8, 
    "productName": "Saw", 
    "productCode": "TBX-0022", 
    "releaseDate": "May 15, 2017", 
    "description": "15-inch steel blade hand saw", 
    "price": 11.55, 
    "starRating": 3.7, 
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png" 
}, 
{ 
    "productId": 10, 
    "productName": "Video Game Controller", 
    "productCode": "GMG-0042", 
    "releaseDate": "October 15, 2017", 
    "description": "Standard two-button video game controller", 
    "price": 35.95, 
    "starRating": 4.6, 
    "imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png" 
} 

]

Answer 1

私はこのコースのディスカッションタブであなたの質問に答えました。ここで私の答えは：

httpを使用してproduct.jsonファイルから行を追加、更新、または削除することはできません。 getだけが動作します。

httpでデータを追加、更新、および削除するには、バックエンドサーバーが必要です。バックエンドサーバーを実際にセットアップすることなく、追加、更新、および削除を試すために使用できるインメモリバックエンドサーバーがあります。

詳細情報およびサンプルコードを参照してください：あなたはそれに加入していない場合は観察可能が何もしませんhttps://app.pluralsight.com/player?course=angular-2-reactive-forms&author=deborah-kurata&name=angular-2-reactive-forms-m8&clip=0&mode=live