Angular2再利用可能なコンポーネントの追加と編集

Question

私はangular2を初めて使用しており、製品のリストを表示してユーザーが新しいアイテムを追加して既存のアイテムを編集できるようにするための基本的な設計に取り組んでいます。各行には、行データを取得してテキスト領域に表示する編集ボタンがあります。 追加と編集について同じコンポーネントを使用しようとしています。 オプションを追加すると、（ngModelを使用して）問題なくサーバーにデータを投稿できますが、[編集]ボタンをクリックすると、modifyoptions.componentページでデータが取得されません。他の行をクリックすると、正しく動作します。 modifyoptions.component.htmlからngModelを削除しても正常に動作します。

これは私のmodifyoptions.component.htmlファイルです。私は、行を追加し、編集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> 

上の値を取得していたに

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

マイ製品リストファイル

コンポーネントファイル：

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

をそれは2 ngModel年代を持つことが実際に可能です。私はそれが何とかあなたのアプリを破壊するかどうか分かりません。あなたはそれを試してみる必要があります:)これは、同様の状況で2つのngModelを使用するように実験して見つけました。少なくとも私にとっては、私のアプリケーションを壊しませんでした。

は、だからあなた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) 
    .... 
}