在取消雙向數據綁定時還原Angular 2中的UI更改

Question

更新： 添加用於說明的代碼。

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：

AFTER：

我正在尋找一種方法單擊取消時，以確保一切恢復到原來的狀態。我還包括了一些正在使用的代碼片段。話雖如此，我不確定哪個代碼在這個問題上最重要。

<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">&times;</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> 

Answer 1

您沒有顯示任何代碼片段，其中展示瞭如何實際顯示模態，以及如何將對象傳遞給它。但我認爲這個問題在於，您應該對錶中提供的同一對象進行引用，而您應該對數據副本進行操作。

所以，當打開你的模態時，你應該複製選中的對象並在這個副本上執行操作。更改不會在表中被動地反映出來，因此保存後您將不得不更新表中顯示的記錄。在這種情況下，您不必擔心取消後恢復更改。

但從UX點，與模態，這也是一個好主意，更新記錄後保存，而不是打字時更新它們。