我正在创建新的 angular 2 应用程序，其中我分别创建了一个组件（html 和 ts）文件。
我在其中显示了用于编辑和添加记录的列表和列表模型。
现在，当我提交表单时，只有两个字段将正确的数据传递给组件。其余字段为空。另外，当我尝试编辑记录时，什么也没有发生。谁能帮我解决问题。
这是我的模型。
export interface ProductCategory{
categoryId: number;
productType: string;
description : string;
updatedBy: Date;
isActive: boolean;
lastUpdatedDate: Date;
}
这是我的组件 html。
<div class="container">
<div class="row">
<div class='panel panel-primary'>
<div class='panel-heading'>
Category Management
</div>
<div class='panel-body'>
<div class='table-responsive'>
<div style="padding-bottom:10px"><button class="btn btn-primary" (click)="addproductcategory()">Add</button></div>
<div class="alert alert-info" role="alert" *ngIf="indLoading"><img src="../../images/loading.gif" width="32" height="32" /> Loading...</div>
<div *ngIf='ProductCategories && ProductCategories.length==0' class="alert alert-info" role="alert">No record found!</div>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>ProductType</th>
<th>Description</th>
<th>UpdatedBy</th>
<th>IsActive</th>
<th>LastUpdatedDate</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr *ngFor="let ProductCategory of ProductCategories">
<td><input type="checkbox" class="checkthis" /></td>
<td>{{ProductCategory.productType}}</td>
<td>{{ ProductCategory.description }}</td>
<td>{{ ProductCategory.updatedBy }}</td>
<td>{{ ProductCategory.isActive }}</td>
<td>{{ ProductCategory.lastUpdatedDate }}</td>
<td><p data-placement="top" data-toggle="tooltip" (click)="editproductcategory(ProductCategory.categoryId)" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip" (click)="deleteProductCategory(ProductCategory.categoryId)" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
</tr>
</tbody>
</table>
<div>
</div>
</div>
<div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
{{msg}}
</div>
</div>
</div>
</div>
</div>
<bs-modal #modal>
<form novalidate (ngSubmit)="onSubmit()" [formGroup]="ProdCateForm">
<bs-modal-header [showDismiss]="true">
<h4 class="modal-title">{{modalTitle}}</h4>
</bs-modal-header>
<bs-modal-body>
<div class="form-group">
<div>
<span>ProductType</span>
<input type="text" class="form-control" placeholder="ProductType" formControlName="producttype">
</div>
<div>
<span>Description</span>
<input type="text" class="form-control" placeholder="Description" formControlName="description">
</div>
<div>
<span>UpdatedBy</span>
<input type="text" class="form-control" placeholder="UpdatedBy" formcontrolName="updatedBy">
</div>
<div>
<span>Updated date</span>
<input type="text" class="form-control" ngbDatepicker placeholder="LastUpdatedDate" formcontrolName="lastUpdatedDate">
</div>
<div>
<span>isActive</span>
<input type="checkbox" class="form-control" formcontrolName="isActive">
</div>
</div>
</bs-modal-body>
<bs-modal-footer>
<div>
<a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
<button type="submit" [disabled]="ProdCateForm.invalid" class="btn btn-primary" >{{modalBtnTitle}}</button>
</div>
</bs-modal-footer>
</form>
</bs-modal>
这是我的组件 ts 代码。
import { Component, OnInit, ViewChild } from '@angular/core';
import { RepositoryService } from '../shared/services/repository.service';
import { ProductCategory } from '../_interfaces/ProductCategory.model';
import { HttpClientModule } from '@angular/common/http';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { DBOperation } from '../shared/services/enum';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
@ViewChild('modal') modal: BsModalComponent;
public ProductCategories: ProductCategory[];
indLoading: boolean = false;
// productcategoryfrm: FormGroup;
ProdCateForm: FormGroup;
dbops: DBOperation;
modalTitle: string;
modalBtnTitle: string;
msg: string;
ProductCategory: ProductCategory;
constructor(private fb: FormBuilder, private repository: RepositoryService) { }
ngOnInit() {
this.ProdCateForm = this.fb.group({
producttype: [''],
description: [''] ,
updatedBy: [''],
lastUpdatedDate: [null],
isActive: [''],
});
this.getAllProductCategory();
}
public getAllProductCategory()
{
let apiAddress: string = "api/prodCategory";
this.repository.getData(apiAddress)
.subscribe(res => {
this.ProductCategories = res as ProductCategory[];
this.indLoading = false;
console.log(JSON.stringify(res));
//this.repository.getData(apiAddress).subscribe(result => { this.ProductCategories =result as ProductCategory[]
});
}
addproductcategory() {
this.dbops = DBOperation.create;
this.SetControlsState(true);
this.modalTitle = "Add New Product Category";
this.modalBtnTitle = "Add";
this.ProdCateForm.reset();
this.modal.open();
}
editproductcategory(categoryId: number) {
console.log(categoryId);
this.dbops = DBOperation.update;
this.SetControlsState(true);
this.modalTitle = "Edit User";
this.modalBtnTitle = "Update";
//this.ProductCategory = this.ProductCategories.filter(x => x.categoryId == id)[0];
let apiAddress: string = "api/prodCategory/ ${categoryId} ";
this.repository.getData(apiAddress)
.subscribe(res => {
this.ProductCategory = res as ProductCategory;
this.indLoading = false;
console.log(JSON.stringify(res));
//this.repository.getData(apiAddress).subscribe(result => { this.ProductCategories =result as ProductCategory[]
});
this.ProdCateForm.setValue(this.ProductCategory);
this.modal.open();
}
onSubmit() {
this.msg = "";
let apiAddress: string ;
switch (this.dbops) {
case DBOperation.create:
apiAddress= "api/prodCategory/Create";
console.log( this.ProdCateForm.value);
this.repository.create(apiAddress, this.ProdCateForm.value).subscribe(data => {
if (data == 1) //Success
{
console.log(data);
this.msg = "Data successfully added.";
this.getAllProductCategory();
} else {
console.log(data);
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
this.modal.dismiss();
}, error => {
this.msg = error;
});
break;
case DBOperation.update:
apiAddress= "api/prodCategory/Put";
this.repository.update(apiAddress, this.ProdCateForm.value).subscribe(data => {
if (data == 1) //Success
{
this.msg = "Data successfully updated.";
this.getAllProductCategory();
} else {
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
this.modal.dismiss();
}, error => {
this.msg = error;
});
break;
case DBOperation.delete:
//apiAddress= "api/prodCategory/Delete";
apiAddress= "api/owner/";//+ this.productcategoryfrm.AlbumId;
this.repository.delete(apiAddress).subscribe(data => {
if (data == 1) //Success
{
this.msg = "Data successfully deleted.";
this.getAllProductCategory();
} else {
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
this.modal.dismiss();
}, error => {
this.msg = error;
});
break;
}
}
SetControlsState(isEnable: boolean) {
isEnable ? this.ProdCateForm.enable() : this.ProdCateForm.disable();
}
}
除了列表之外，没有任何工作。
下面是我第一次加载数据时的 json。
[{"categoryId":1,"productType":"It product","description":"All product Related to IT","updatedBy":"It user2","isActive":true,"lastUpdatedDate":"2018-07-18T19:47:20.817"},{"categoryId":2,"productType":"Home product","description":"All product Related to Home","updatedBy":"Home user","isActive":true,"lastUpdatedDate":"2018-07-14T23:31:55.09"},{"categoryId":10002,"productType":"Sport user","description":"Sport user Category","updatedBy":"Sport user","isActive":true,"lastUpdatedDate":"2018-07-19T18:55:02"},{"categoryId":10005,"productType":"Caar User","description":"Caar User Category","updatedBy":"Caar User","isActive":true,"lastUpdatedDate":"2018-07-19T18:55:02"}]
请帮我解决这个问题。
提前致谢。奥姆卡尔。