我是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);
}
}
答案 0 :(得分: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)
....
}