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