Question

如何使用带有http和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文件添加，更新或删除行。只有得到了。

要使用http添加，更新和删除数据，您需要一台后端服务器。您可以使用内存后端服务器来尝试添加，更新和删除，而无需实际设置后端服务器。

有关详细信息和示例代码，请参阅：https://app.pluralsight.com/player?course=angular-2-reactive-forms&author=deborah-kurata&name=angular-2-reactive-forms-m8&clip=0&mode=live

使用带有http和observables的angular2在json文件中添加/更新/删除产品

1 个答案: