Angular2可重用添加和編輯組件

Question

我是angular2的新手，他正在進行基本設計，以顯示產品列表，並允許用戶添加新項目並編輯現有項目。 對於每一行，都有一個編輯按鈕，用於檢索行數據並將其顯示在文本區域上。 對於添加和編輯，我試圖使用相同的組件。 添加選項工作正常（使用ngModel）並且它在服務器上發布數據沒有任何問題，但是當我單擊編輯按鈕時，數據不會在modifyoptions.component頁面上進行檢索。 如果我點擊其他行，它會開始正常工作。 如果我從modifyoptions.component.html刪除ngModel它工作正常。

這是我的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。 我不知道它是否會以某種方式打破你的應用程序。 你只需要嘗試:)我通過嘗試在類似的情況下使用兩個ngModel來發現這一點，至少對我來說它並沒有破壞我的應用程序。

所以將你的value = dataToEdit...改為使用[(ngModel)]="dataToEdit. ...

編輯：

由於您在評論中添加了將新值與編輯值分開的問題。 不知道你是怎么創建一個新項目，所以這是一個猜測....

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

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

我建議您實際制作兩個按鈕，根據條件顯示，並在addNewItems -method中明確添加項目作為參數。 所以這里只顯示或隱藏另一個按鈕，它檢查是否存在已編輯的項目，如果存在，請參閱ngModel dataToEdit並在addNewItem方法中傳遞該對象。 如果它是一個新項目，則將新創建的數據作為參數傳遞。

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

當然，你可以使用相同的方法，因為你傳遞參數。

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