我有像这样的引导程序
<ul class="navbar-nav">
<li class="nav-item">
<a type="submit" form="editFormTruck"
(click)="processForm()"
class="btn btn-light"
title="Save Truck"
data-toggle="tooltip"
data-placement="bottom">
<i class="fa fa-save"></i> <span class="d-none d-sm-inline">Save</span>
</a></li>
</ul>
</nav>
</header>
<section id="truck">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<!--works no forms yet-->
<form (ngSubmit)="processForm()" id="editFormTruck">
<div class="form-group">
<label class="form-control-label" ngFor="truckCode">Truck code</label>
<input type="text" name="truckCode" class="form-control" [(ngModel)]="truck.truckCode">
</div>
<div class="form-group">
<label class="form-control-label" ngFor="purchasedDate">purchased Date</label>
<input type="text" name="purchaseDate" class="form-control" [(ngModel)]="truck.purchasedDate">
</div>
<div class="form-group">
<label class="form-control-label" ngFor="truck.description">Description</label>
<input type="text" name="description" class="form-control" [(ngModel)]="truck.description">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
上面的表格属于编辑组件,当我从另一个组件点击编辑我有一个列表我来到这个组件,输入空间内的数据是正确的但是在编辑后保存在我的列表中的所有值变为相同我编辑过的价值,也就是说我在编辑一辆卡车后得到了这个值
TruckCode purchasedDate descriptions
1 BTY200 2006-05-05 New WOrkdl Edit Delete
2 BTY200 2006-05-05 New WOrkdl Edit Delete
3 BTY200 2006-05-05 New WOrkdl
这是我的编辑组件类
export class EditTruckComponent implements OnInit {
private truck: Truck;
public truckForm: FormGroup;
constructor(private truckService: TruckService,
private router: Router) {
}
ngOnInit() {
this.truck = this.truckService.getter();
}
processForm() {
if (this.truck.truckId == undefined) {
this.truckService.createTruck(this.truck)
.subscribe((truck) => {
console.log(truck)
this.router.navigate([''])
},(error) => {
console.log(error);
});
} else {
this.truckService.updateTrucks(this.truck)
.subscribe(
(truck) => {
console.log(truck);
this.router.navigate([''])
}, (error) => {
console.log(error);
});
}
}
这是卡车组件的更新和创建卡车方法
updateTruck(truck) {
this.truckService.setter(truck)
this.router.navigate(['/edits'])
}
//this gets us edit page with blank forms.
newTruck() {
let truck = new Truck(null, null, new Date(), "")
this.truckService.setter(truck)
this.router.navigate(['/edits'])
}