1
モーダルフォームの更新値に問題があります。保存をクリックすると入力値を更新したいが、何かを書き込むとその更新はウィンドウを閉じる。これは私のコードです：数値を角で編集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);
}
誰もが知っていますか？
フォームでこれを行う必要はありません。 モーダル変数にtemp変数を作成し、保存関数で変数をメイン変数に割り当てることができます。 –
はい、あなたは正しいです！しかし、私は1つの質問がある、私は価値のある2つの入力がある。 1入力： は[ngModel] = "selectedItem.name" #change 第二の入力： [ngModel] = "selectedItem.zipCode" #change 編集ボタン： だから私は両方の私はこのような何かをしようとアップデートを試してみてください（クリック）=「更新（変更値）」 およびコンポーネント： 更新（値）{ this.selectedItem.name = value; this.selectedItem.zipCode = value; } もっと入力をどのように変更できますか？今は1つの入力から値を取得し、すべてのフィールドを編集する – Bartas
回答セクションでスニペットでお答えします –