在取消双向数据绑定时还原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点，与模态，这也是一个好主意，更新记录后保存，而不是打字时更新它们。