【发布时间】：2018-03-31 03:21:16
【问题描述】：
我的模态表单中的更新值有问题。我想在单击保存时更新输入值，但是当我写东西时它会更新关闭窗口。这是我的代码：
模态编辑.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>
renovation-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>
（导入部分来自）revision-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();
}
modal-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() {
}
}
（仅导入部分）revision.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编辑按钮：（点击）=“更新（更改.value)" 并在组件中：update(value) { this.selectedItem.name = value; this.selectedItem.zipCode = 值；您知道如何修改更多输入吗？因为现在它从一个输入中获取价值并编辑所有字段
-
我会在答案部分用sn-p回答你
标签： html typescript angular2-template angular2-forms