Angular 添加屬性到 JSON Object 從輸入使用 Z72664DC0959F3B0C04891F8C0Z73

Question

您好，我的目標是向 object 屬性添加一個輸入值。

它的現狀是客戶想要將商品添加到他或她的購物車中，但在添加商品之前，他們必須選擇尺寸。 我有表單以及驗證工作我能夠在單擊單選按鈕並調用 onSubmit() function 時獲取值。 我已經有一個購物車服務 function 添加到使用api工作的購物車。 我能夠獲得帖子項目的ID。 我需要獲取該 Valuesize 並將其添加為屬性 (size:Valuesize)，它是一個字符串。

我確實將 Valuesize 作為參數傳遞給了購物車服務。 從邏輯上思考，我需要進行更新以添加 object 屬性。 這是我被卡住了。 我確實嘗試為此添加功能，但它的行為不符合預期。 如果有人能指出我正確的方向，我將不勝感激。

下面的代碼片段

Model

我的 model 的尺寸是可選的，因此它在 object 上不存在。 我不確定我是否應該先發帖，然后通過 id 獲取請求並添加屬性。

import { Product } from './product';


export class CartItem {

    static splice(arg0: number) {
      throw new Error('Method not implemented.');
    }

    id: number;
    productId: number;
    productName: string;
    qty: number;
    price: number;
    size?:string;
    imageUrl:string;

    constructor(id:number, size:string,  product:Product, qty= 1) {

        this.id = id;
        this.productId = product.id;
        this.price = product.price;
        this.size = size;
        this.productName = product.name;
        this.qty = qty;
        this.imageUrl = product.imageUrl;
         
        
    }


    
}

產品列表.ts

export class ProductItemComponent implements OnInit {

  form: FormGroup; 
  submitted=false;
  sizeBy:string;

  Valuesize:string;
 


  
 @Input() productItem:Product 


 @Input() addedToWishlist: boolean;


 //@Input() addedToWishlistitem: boolean = false;

  constructor(private msg: MessengerService, private cartService: CartService,  private formBuilder: FormBuilder,
    private wishlistService:WishlistService, private _wishlistitemService: WishlistItemService,private alertService: AlertService, private _data:AppserviceService) { }


    //: void  hold this for now on ngOnInit
  ngOnInit() {
    this.form = this.formBuilder.group({
        sizeBy: ['', Validators.required]
    });
       
    
    }




 // convenience getter for easy access to form fields
 get f() { return this.form.controls; }

 onSubmit() {

    this.submitted = true;
  
   // reset alerts on submit
   this.alertService.clear();
    
   // stop here if form is invalid

   if (this.form.invalid) {
        return;
   } 

   if (!this.form.invalid){
      this.Valuesize = this.form.value.sizeBy
            
       this.handleAddToCart();
     }
  
  }

 
  handleAddToCart(){
    this.Valuesize;
    alert("Am I able to to get Valuesize" + this.Valuesize)

 this.cartService.addProductToCart(this.productItem,this.Valuesize)
 .subscribe((product:Product) =>{
      this.productItem = product;
       this.msg.sendMsg(this.productItem)
  })
}

}

購物車服務

addProductToCart(product:Product,Valuesize):Observable<any>{
    //return this.http.post(cartUrl, {product});
    
    alert("Inside add product to cart");
     return this.http.post<any>(cartUrl, {product}).pipe(
      map(data =>{
       alert("To this point");
         this.postId=data.id;  //able to get id of item of post
           console.log("Logging"+ data);
           console.log("Get Id from a post"+ this.postId)
           alert("what is the item size" + Valuesize)
       
         /*Need to update data */
         let id = this.postId;
         let endPoints = "/cart/";
         this.http.put(this.url + endPoints + id, 
          this.newObjectProp).pipe(
          map((option: any[]) => {
            //new property to be added
              this.newObjectProp={
              size:Valuesize
             };
             //assign new property and return
             console.log("Getting Item from cart" + option); 
            return Object.assign(option,this.newObjectProp)
          
         })
         )
         
         return data;
     
  
     })

     )
  
   }

它出現在 json 服務器 db.json 上的方式

"cart": [
 {
      "product": {
        "id": 4,
        "name": "Purple Outfit",
        "description": "Lorem Ipsum is simply 
         dummy text of the printing and 
         typesetting industry. Lorem Ipsum has 
         been the industry's standard dummy 
         text ever since the 1500s, when an 
         unknown printer took a galley of type 
         and scrambled it to make a type 
         specimen book.",        
        "imageUrl":"http://localhost:4200/
         assets/purpleoutfit4.png",
        "price": 100
      },
      "id": 7
    }

    
  ],

Answer 1

Object.assign 永遠不會適用於我想要實現的目標，因為 object assign 會將所有可枚舉的自身屬性從一個或多個源對象復制到目標 object。 看跌期權也永遠不會起作用。 有很多不必要的代碼。 我把這一切都拿出來重新開始

addProductToCart(product:Product,Valuesize:string):Observable<any>{


return this.http.post<any>(cartUrl, {product})
   

}

添加 Valuesize 所需的任何代碼都必須在返回之前 go 。