Question

我正在研究一个Angular2应用程序，我无法弄清楚这个父/子部分。

我想要实现的目标：“制作人”有多个“产品”。最后，我想检索每个生产者的产品清单。

问题是，我无法弄清楚如何将“产品”添加到“制作人”的列表中。

使用下面的代码我在“Product”和“Producer”上执行crud操作，但我不知道如何继续向“Producer”添加“Product”。

我的后端是Spring Boot + MongoDB后端。

我有我的producer.component，它调用模板来添加产品：

producers.component.html 它调用addProduct（）

   <div *ngIf="selectedProducer">
    <h2>{{selectedProducer.name | uppercase}} is my producer</h2>
    <button (click)="gotoDetail()">View details</button>
    <div>
    <button (click)="addProduct()">Add product</button>
</div>

producers.component.ts addProduct命令（）

addProduct(): void{
this.router.navigate(['/producers', this.selectedProducer.id,'addProduct']);
}

app-routing.module.ts 路由到ProductAddComponent

 { path: 'producers/:id/addProduct',     component: ProductAddComponent }

产品add.component.html 表单添加产品

  <h2>Add product</h2>
  <div>
     <form [formGroup]="productForm" (ngSubmit)="add(productForm)">

    <span><h3>Add Product:</h3></span>

    <label>Product id:</label><input formControlName="id"><br>
    <label>Product ean:</label><input formControlName="ean"><br>
    <label>Product name:</label><input formControlName="name"><br>

    <span><h5>Nutrition per 100 grams:</h5></span>
    <label>Energy (kcal)</label>
    <input formControlName="kcal"><br>
    <label>Saturated fat:</label>
    <input formControlName="satFat"><br>
    <label>Unsaturated fat:</label>
    <input formControlName="unsatFat"><br>
    <label>Carbohydrates:</label>
    <input formControlName="carbs"><br>
    <label>Protein:</label>
    <input formControlName="protein"><br>
    <label>Sugar:</label>
    <input formControlName="sugar"><br>
    <label>Salt:</label>
    <input formControlName="salt"><br>

    <button type="submit" class="btn btn-success">Submit</button>
</form>

产品add.component.ts

 import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';

 import { Nutrition } from '../model/nutrition';
 import { Product } from '../model/product';
 import { ProductService } from '../services/product.service';

 import { Observable } from "rxjs/Observable";

 import { Form, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';


 @Component({
   selector: 'my-product-add',
   templateUrl: '../templates/product-add.component.html',
   styleUrls: ['../css/product-add.component.css'],
   providers: [ProductService]
 })

 export class ProductAddComponent implements OnInit { 
   jsonResponse: string;
   errorMessage: string;
   products: Product[];
   selectedProduct: Product;
   lastRequestResult : boolean;
   nameToAddInput: string;
   @Input('producer') producerName: string;
   productWithSpecifiedNameAlreadyExists: boolean = false;

   public productForm: FormGroup;

   constructor(
    private router: Router,
    private productService: ProductService,
    private _fb: FormBuilder 
     ) { }

   ngOnInit(): void{
    this.productForm = new FormGroup({
      producer: new FormControl('', Validators.required),
      id: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      ean: new FormControl('', Validators.required),
      kcal: new FormControl('', Validators.required),
      satFat: new FormControl('', Validators.required),
      unsatFat: new FormControl('', Validators.required),
      carbs: new FormControl('', Validators.required),
      protein: new FormControl('', Validators.required),
      sugar: new FormControl('', Validators.required),
      salt: new FormControl('', Validators.required)
    })
   }

   getProducts() {
     this.productService.getProducts()
     .subscribe(
       (data) => {
         this.jsonResponse = JSON.stringify(data);
         this.products = data;
         console.log(data);
       })
   }

   add(product: Product): void {
     var product : Product = new Product();
      product.id = this.productForm.get('id').value.trim();
      product.name = this.productForm.get('name').value.trim();
      product.ean = this.productForm.get('ean').value.trim();

      product.nutrition = {
        kcal: this.productForm.get('kcal').value.trim(),
        satFat: this.productForm.get('satFat').value.trim(),
        unsatFat: this.productForm.get('unsatFat').value.trim(),
        carbs: this.productForm.get('carbs').value.trim(),
        protein: this.productForm.get('protein').value.trim(),
        sugar: this.productForm.get('sugar').value.trim(),
        salt: this.productForm.get('salt').value.trim()
   };

   this.productService.create(product)
     .subscribe(
       data => {
         this.lastRequestResult = (data == "true");
         this.productWithSpecifiedNameAlreadyExists = !this.lastRequestResult;
       },
     err => this.logError(err),
       () => {
         this.getProducts();
         console.log("add request result: " + this.lastRequestResult);
         console.log(product);
       }
     )
    }

   private logError(error: any): Promise<any> {
     console.error('An error occurred', error);
     return Promise.reject(error.message || error);
   }

 }

product.service.ts

 import { Injectable } from '@angular/core';
 import { Headers, Http, Response } from '@angular/http';

 import { Observable } from "rxjs/Observable";
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';

 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/map';

 import { Product } from '../model/product';

 @Injectable()
 export class ProductService {

private productsUrl = 'http://localhost:8181/api/products'; // url to web api
private producersUrl = 'http://localhost:8181/api/producers'; // url to web api

private headers = new Headers({'Content-Type': 'application/json'});

constructor(private http: Http) { }

getProducts(): Observable<Product[]>{
    return this.http.get(this.productsUrl)
    .map((res:Response) => res.json());

}

private getHeaders(){
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}


private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
  const body = error.json() || '';
  const err = body.error || JSON.stringify(body);
  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
  errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}


getProduct(id: string): Observable<Product> {
    const url = `${this.productsUrl}/${id}`;
    return this.http.get(url)
    .map((res:Response) => res.json());
}

update(product: Product): Promise<Product> {
    const url = `${this.productsUrl}`;
    return this.http
    .put(url, JSON.stringify(product), {headers: this.headers})
    .toPromise()
    .then(() => product)
    .catch(this.handleError);
}

 create(product: Product): Observable<any> {
    const url = `${this.productsUrl}/${product.id}`;
    return this.http.post(url, product, {headers: this.headers})
    .map(res => res.text());
}

delete(id: string): Promise<void> {
    const url = `${this.productsUrl}/${id}`;
    return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
}
}

非常感谢任何帮助!!

Answer 1

根据您每个制作人估计的20个产品，我建议您按照以下方式构建MongoDB：

<强>生产者

{
    _id: objectId('58e655aabc8fe900119ae7a7')
    producerName: 'Test producer',
    products: [
        ObjectId('593b28e80000000000000000')
    ]
}

<强>产品

{
    _id: ObjectId('593b28e80000000000000000'),
    productName: 'Test product'
}

然后，当您将产品插入产品系列时，将其推送到producer产品数组。然后在您的应用程序中，您可以为制作人选择所有产品。

Answer 2

我没有使用Spring启动 - 所以这可能不合适 - 这就是我没有Spring启动的方式。（我假设Spring启动会这样做）

我也不确定你的问题是Angular，Spring boot还是mongo：）

我会将产品与生产者联系起来 - 这是每个生产者一个产品吗？或者许多供应商可以生产产品吗？

如果是1：1，那么我会在创建产品消息中包含生产者ID。然后将其存储在数据库中。

如果这是一个多对多的关系，那么你将需要一个组件和服务来创建关系。

我看不到你想要显示列表的位置？我假设，您想在生产者详细信息页面中显示它。在这种情况下，我会在该组件加载时为生产者及其产品提出请求。

无论如何 - 希望其中的内容有所帮助。

Angular2父子组件

2 个答案: