Angular2父子組件

Question

我正在使用Angular2應用程序，但無法弄清楚這個父/子部分。

我要實現的目標：一個“生產者”具有多個“產品”。 最后，我想檢索每個生產者的產品列表。

問題是，我不知道如何將“產品”添加到“生產者”的列表中。

使用下面的代碼，我對“產品”和“生產者”都進行了粗體操作，但是我不知道如何將“產品”添加到“生產者”中。

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

我有我的producers.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 }

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

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

 }

產品服務

 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'
}

然后，當您將產品插入產品系列時，將其推入生產者產品陣列。 然后，您可以在應用程序中為生產者選擇所有產品。

Answer 2

我沒有使用過Spring Boot-所以這可能不合適-這就是我沒有Spring boot的方式。 （我認為Spring Boot會這樣做）

我也不確定您的問題是Angular，Spring boot還是mongo :)

我會將產品與生產者關聯-每個生產者是否都生產一種產品？ 還是可以由許多供應商生產產品？

如果是1：1，那么我將在創建產品消息中包含生產者ID。 然后將其存儲在數據庫中。

如果是多對多關系，那么您將需要一個組件和服務來創建關系。

我也看不到要在哪里顯示列表？ 我想，您想在生產者詳細信息頁面中顯示它。 在這種情況下，當該組件加載時，我會向生產者及其產品發出獲取請求。

無論如何-希望其中有所幫助。