更新: 添加用於說明的代碼。在取消雙向數據綁定時還原Angular 2中的UI更改
client.component.ts
import { Component } from "@angular/core";
import { ClientService } from "../services/client.service";
import { Client } from "../types/client";
@Component({
selector: "rpcs-client",
templateUrl: "/app/client/client.component.html",
providers: [ClientService]
})
export class ClientComponent {
private clients: Client[];
private newClient = new Client();
private client: Client;
private _cl: ClientService;
constructor(clientService: ClientService) {
this._cl = clientService;
this._cl.getAll()
.subscribe(
response => this.clients = response,
err => console.log("Error: ", err),
() => console.log("Fetch clients complete.", this.clients)
);
}
saveClient(client: Client) {
this._cl.saveClient(client)
.subscribe(
response => this.client = response,
err => console.log("Error: ", err),
() => console.log("Save client complete.", this.clients)
);
}
addClient(client: Client) {
this._cl.addClient(this.newClient)
.subscribe(
response => {
this.client = response;
this.clients.push(this.client);
},
err => console.log("Error: ", err),
() => console.log("Add client complete.", this.clients)
);
}
deleteClient(clientId: number, client: Client) {
this._cl.deleteClient(clientId, client)
.subscribe(
response => {
this.client = response;
// this.clients.splice(this.clients.indexOf(this.client), 1);
},
err => console.log("Error: ", err),
() => console.log("Delete client complete.", this.clients)
);
}
}
client.service.ts
import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { SpringfieldService } from "./springfield.service";
import "rxjs/add/operator/map";
import { Client } from "../types/client";
@Injectable()
export class ClientService extends SpringfieldService {
private url = this.baseUrl + "Clients";
constructor(private http: Http) {
super();
}
getAll() {
return this.http.get(this.url)
.map((res: Response) => res.json());
}
getClient(clientId: number) {
return this.http.get(this.url, clientId)
.map((res: Response) => res.json());
}
saveClient(client: Client) {
return this.http.put(this.url, client)
.map((res: Response) => res.json());
}
addClient(client: Client) {
return this.http.post(this.url, client)
.map((res: Response) => res.json());
}
deleteClient(clientId: number, client: Client) {
return this.http.delete(`${this.url}/${clientId}`)
.map((res: Response) => res.json());
}
}
ORIGINAL:
我有一個模式,使您可以在數據庫中編輯數據從使用Angular 2的Web API應用程序開始。除了當我們想要取消更改時,一切正常。
每當我們打取消,所做的更改不會在數據庫中反映,因爲沒有被撲出,但它仍然顯示在用戶界面中,你可以在之前和以下圖片後看到。如果我用紐約州的「sss」取消取消,那麼sss會保留在站點上,直到我手動刷新頁面。
BEFORE:
我正在尋找一種方法單擊取消時,以確保一切恢復到原來的狀態。我還包括了一些正在使用的代碼片段。話雖如此,我不確定哪個代碼在這個問題上最重要。
<div class="modal fade" id="EditClientModal{{client.ClientId}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="editModalLabel2">
Edit Client
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h3>
</div>
<div class="modal-body">
<form #form="ngForm">
<div>
<span>Client Name:</span>
<input class="form-control" type="text" name="clientName" id="clientName" [(ngModel)]="client.ClientName" />
</div>
<div>
<span>Client Number:</span>
<input class="form-control" type="text" name="clientNumber" id="clientNumber" [(ngModel)]="client.ClientNumber" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" (click)="saveClient(client)">
<span class="glyphicon glyphicon-floppy-disk"/> Save
</button>
</div>
</div>
</div>
</div>
複製的想法聽起來不錯,但我將如何去調用對象的副本而不是對象本身?我在原始文章中增加了一些代碼以進行澄清 –
您是否也可以附加負責顯示模式的部分。呈現單擊編輯按鈕的動作的部分? – Marcin