Angular2 reusable добавить и отредактировать компоненты

Question

Я новичок в angular2 и работаю над базовым дизайном, чтобы показать список продуктов и позволить пользователю добавлять новый элемент и редактировать существующий элемент. Для каждой строки есть кнопка редактирования, которая будет извлекать данные строки и отображать ее в текстовых областях. Для добавления и изменения я пытаюсь использовать один и тот же компонент. Добавить параметр работает отлично (используя ngModel), и он публикует данные на сервере без каких-либо проблем, но когда я нажимаю кнопку редактирования, данные не удаляются на странице modifyoptions.component. Если я нажму на другие строки, он начнет работать правильно. Если я удалю ngModel из файла modifyoptions.component.html, он отлично работает.

Это мой файл modifyoptions.component.html.

<label>Price</label> 
<input type = "text" id = "itemPrice" value = {{dataToEdit.price}} [(ngModel)] = "newItemData.price"> 
<label>Name</label> 
<input type = "text" id = "itemName" value = {{dataToEdit.name}} [(ngModel)] = "newItemData.name"> 
<label>Brand</label> 
<input type = "text" id = "itemBrand" value = {{dataToEdit.brand}} [(ngModel)] = "newItemData.brand"> 
<label>Description</label> 
<input type = "text" id = "itemDescription" value = {{dataToEdit.description}} [(ngModel)] = "newItemData.description"> 

<button type="button" id = "btnSaveItem" (click) = "addNewItems()" 
    class="navbar-toggle collapsed" 
    data-toggle="collapse"> 
    Save</button> 

modifyoptions.component.ts

import { Component, OnInit ,Input} from '@angular/core'; 
import {FetchDataService} from '../Services/fetch-data.service'; 

@Component({ 
    selector: 'app-modifyoptions', 
    templateUrl: './modifyoptions.component.html', 
    styleUrls: ['./modifyoptions.component.css'] 
}) 
export class ModifyoptionsComponent implements OnInit { 

    constructor(public fetchDataSvc : FetchDataService) { 

    } 

    ngOnInit() { 
    } 

    newItemData:any = {}; 

    @ Input() dataToEdit:any; 


    addNewItems(){ 
    console.log(this.newItemData); 
    this.fetchDataSvc.modifyListOfProducts(this.newItemData) 
    .subscribe((result) => {console.log(result)}, 
    error => { 
     console.log(error); 
    }); 
    } 
} 

Мой список продуктов файл, в котором я добавляю строку и получения значения при редактировании product.component.html

<table class="table table-striped table-hover "> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>id</th> 
     <th>Price</th> 
     <th>Name</th> 
     <th>Brand</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let item of jsonProductList" > 
     <td>#</td> 
     <td>{{item._id}}</td> 
     <td>{{item.price}}</td> 
     <td>{{item.name}}</td> 
     <td>{{item.brand}}</td> 
     <td>{{item.description}}</td> 
     <td><button type="button" id = "btnEditItem" (click) = "showEditDialog(item)" 
    class="navbar-toggle collapsed" 
    data-toggle="collapse"> 
    Edit</button></td> 
    </tr> 
    </tbody> 
</table> 

<div *ngIf="showEditFlag==true"> 
    <app-modifyoptions [dataToEdit] = "item"></app-modifyoptions> 
</div> 

Файл компонента:

import { Component, OnInit } from '@angular/core'; 
import {FetchDataService} from '../Services/fetch-data.service'; 

@Component({ 
    selector: 'app-product', 
    templateUrl: './product.component.html', 
    styleUrls: ['./product.component.css'] 
}) 
export class ProductComponent implements OnInit { 

    jsonProductList : any; 
    showEditFlag = false; 

    item :any; 

// component is already loaded but line 18 will be executed based on the server response. 
    constructor(fetchDataSvc : FetchDataService) { 
    fetchDataSvc.getListOfProducts().subscribe((result) => {console.log(this.jsonProductList = result)}, 
    error => { 
     console.log(error); 
    }); 
    } 

    ngOnInit() { 
    } 

    showEditDialog(item){ 
    this.showEditFlag = true; 
    this.item = item; 
    console.log(item); 
    } 

} 

Answer 1

Кажется, что это не очень нравится ваша попытка использовать значение: например

value = {{dataToEdit.price}} 

Это на самом деле можно иметь два ngModel х. Я понятия не имею, если он каким-то образом сломает ваше приложение. Вам просто нужно попробовать :) Я нашел это, поэкспериментируя использовать две ngModels в подобной ситуации, и, по крайней мере, для меня это не сломало мое приложение.

Так изменить ваш value = dataToEdit... с помощью [(ngModel)]="dataToEdit. ...

EDIT:

Так как вы в ваш комментарий добавил, что у вас есть проблемы с отделяя новое значение для редактирования значения. Не зная, как вы создаете новый элемент, так что это немного угадать ....

<div *ngIf="showEditFlag==true"> 
    <app-modifyoptions [dataToEdit]="item"></app-modifyoptions> 
</div> 

<div *ngIf="!showEditFlag"> 
    <app-modifyoptions [dataToEdit]="NewItem></app-modifyoptions> 
</div> 

Я хотел бы предложить вам на самом деле сделать две кнопки, которые вы показываете на основе состояния и явно добавить элемент, как параметр в вашем addNewItems -метод. Поэтому здесь вы просто показываете или скрываете другую кнопку, которая проверяет наличие отредактированного элемента, и если да, обратитесь к ngModel dataToEdit и передайте этот объект в свой метод addNewItem. И если это новый элемент, вместо этого вы передаете вновь созданные данные в качестве параметра.

<button *ngIf="dataToEdit"(click)="addNewItems(dataToEdit)"> 
    Edit 
</button> 
<button *ngIf="!dataToEdit" (click)="addNewItems(newItemData)"> 
    New 
</button> 

И, конечно, вы можете использовать тот же метод, хотя для обоих, поскольку вы передаете параметр.

addNewItems(yourObject) { 
    console.log(yourObject) 
    .... 
}