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 方法中明确添加该项目作为参数。所以在这里你只是显示或隐藏另一个按钮，它检查是否存在编辑的项目，如果存在，请引用 ngModel dataToEdit 并在你的 addNewItem 方法中传递该对象。如果是新项目，则将新创建的数据作为参数传递。

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

当然，您可以对两者使用相同的方法，因为您正在传递参数。

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