객체를 각도로 배열로 밀어 넣으십시오.

Question

배열에 객체를 푸시 할 때 문제가 있습니다. 내부에 객체가있는 배열이 있습니다.

<div class="row" 
    *ngFor="let element of dietList"> 
{{element.name}} {{ element.weight }} 
</div> 

두 번째 배열에 객체를 추가하지만 같은 개체의 다양한 유형에 추가 할 수있을 것입니다 :이 구성 요소를 인쇄 등 쌀, 닭고기를. 그래서 내부에 객체가있는 다른 배열을 만들었습니다. 이 배열에는 사용자가 자신의 값을 확인할 가능성이 있기 때문에 포함되지 않습니다. 그래서 초 성분으로 I 로컬 refference에 제품의 이름을 입력 인쇄

<div *ngFor="let product of products"> 
    {{ product.name }}<input type="text" #weight> 
    <button class="btn btn-primary" (click) = "onAddNewElement(product, weight.value)">Add</button> 
</div> 

onAddNewElement() 방법은 매우 간단하다 : 배열 목적 추진

onAddNewElement(element, weight){ 
    let newElement = element; 
    newElement.weight = weight; 
    this.dietService.newElement(newElement); 
    } 

newElement() 방법.

newElement(element){ 
    PRODUCTS.push(element); 
    } 

효과가 있지만 좋지 않습니다. 첫 번째 요소를 추가하면 모든 것이 정상이지만 다음 요소 값을 추가하면 첫 번째 요소 값을 덮어 쓰게됩니다. 예 : 첫 번째 단계에서는 120g (닭고기 예)의 무게 입력을 확인했습니다. 두 번째 단계에서는 200g에서 체중을 확인했습니다. 결과 2 요소에서 나는 200g에 무게 값을 갈거야. 첫 번째 값은 매번 덮어 씁니다.

Answer 1

그래서 여기에 내가 생각하고있는 것이 있습니다.

당신은 제품의 배열을 가지고 말할 수 :

var products = [{name: 'myOnlyProduct', weight: 120}] 

을 지금 당신에게 루프를 *ngFor에서 제품의 배열을 통해. html로 해당 객체의 가중치를 변경하고 onAddNewElement으로 전달합니다. onAddNewElement에서 이전 개체를 새 가중치로 업데이트하고 newElement에 전달합니다. newElement 똑같은 개체를 배열에 다시 밀어 넣습니다.

가중치를 변경하기 전에 새 객체를 만든 다음 그 객체를 배열로 푸시해야합니다.