1
我的模态表单中有更新值的问题。当我点击保存时，我想要更新输入值，但是当我写一些东西关闭窗口时它会更新。这是我的代码：在Angular 2中通过表单编辑值
模式，edit.html：
<div class="container">
<div class="modal fade" id="editForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edycja remontu</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">Nazwa</label>
<div class="col-md-8">
<input class="form-control"
id="name"
type="text"
placeholder="Nazwa"
required
minlength="3"
[(ngModel)] = "selectedItem.name"
name="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Kod</label>
<div class="col-md-8">
<input class="form-control"
required
type="text"
placeholder="Kod pocztowy"
name="zip-code"
[(ngModel)] = "selectedItem.zipCode"
>
</div>
</div>
</fieldset>
<input type="submit" class="btn btn-default"
data-dismiss="modal" value="Save"
(click)="editRenovation()"
>
<button class="btn btn-default" data-dismiss="modal">Anuluj</button>
</form>
</div>
<div type="submit" class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
装修-list.component.html：
<h1>{{title}}</h1>
<button class="btn btn-primary" data-toggle="modal" data-target="#addForm"
(click)="selectedItem = renovation" >Dodaj</button>
<table class="table table-striped" [mfData]="renovations" #mf="mfDataTable" [mfRowsOnPage]="5">
<thead>
<tr>
<th style="width: 20%">
<mfDefaultSorter by="id">Id</mfDefaultSorter>
</th>
<th style="width: 50%">
<mfDefaultSorter by="name">Nazwa</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="zipCode">Kod pocztowy</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let renovation of mf.data">
<td>{{renovation.id}}</td>
<td>
<a [routerLink]="['/renovations', renovation.id]">
{{renovation.name}}
</a>
</td>
<td class="text-right">{{renovation.zipCode}}</td>
<td>
<button class="btn btn-info" data-toggle="modal" data-target="#editForm" (click)="selectedItem = renovation">Edytuj</button>
<button button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal"
(click)="selectedItem = renovation" >Usuń</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
<app-modal-delete [selectedItem] = selectedItem
[renovations] = renovations
(removeItem) = "onDeleteRenovation($event)">
</app-modal-delete>
（进口部分从）装修，list.component.ts：
resetEdit(): void {
this._renovationService.deleteRenovation(this.selectedItem.id)
.subscribe(()=> this.renovations = this.renovations.filter(item => this.selectedItem !== item))
}
editRenovation(): void {
var editCopy = Object.assign({}, this.selectedItem);
this._renovationService.editRenovation(editCopy)
.subscribe(() => this.renovations.push(editCopy));
this.resetEdit();
}
模式，edit.component.ts：
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {IRenovationList} from '../renovation-list/renovation-list';
import {Renovation} from '../renovation-list/renovation';
import {RenovationListView} from '../renovation-list/renovation-list-view.component';
import {RenovationService} from '../service/renovation.service';
@Component({
selector: 'app-modal-edit',
templateUrl: './modal-edit.component.html',
styleUrls: ['./modal-edit.component.css']
})
export class ModalEditComponent implements OnInit {
@Input() selectedItem: any;
@Input() renovations: IRenovationList[] = [];
@Input() newItem: Renovation = new Renovation();
@Output() editItem: EventEmitter<any> = new EventEmitter<any>();
constructor() { }
editRenovation(): void {
this.editItem.emit();
}
ngOnInit() {
}
}
（仅进口部分）renovation.service.ts：
editRenovation(renovation: IRenovationList): Observable<IRenovationList> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
const url = `${this._renovationUrl}/${renovation.id}`;
console.log();
return this.http.put(url, renovation, options)
.map(() => renovation)
.do(data => console.log('edit remont: ' + JSON.stringify(data)))
.catch(this.handleError);
}
任何人都知道在哪里的问题？
你不需要用窗体来做到这一点。 您可以为您的模态创建临时变量，并在保存功能上将这些变量分配给您的主要变量。 –
是的，你是对的！但我有一个问题，我有两个有价值的投入。所以我尝试更新这两个我尝试这样： 一个输入： [ngModel] = “selectedItem.name” #change 第二个输入： [ngModel] = “selectedItem.zipCode” #change 编辑按钮： （click）=“update（change.value）” and in组件： update（value）{ this.selectedItem.name = value; this.selectedItem.zipCode = value; } 你知道如何修改更多的输入吗？因为现在它从一个输入中获得价值并编辑所有字段 – Bartas
我会在答案部分 –