Html 取消双向数据绑定时还原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());
}

}

原件：

我有一个模式，允许您使用Angular 2从Web API应用程序编辑数据库中的数据。除了我们想取消更改外，一切都正常工作

每当我们点击cancel时，更改不会反映在数据库中，因为没有保存任何内容，但它仍然显示在用户界面中，正如您在下面的前后图像中所看到的那样。如果我点击cancel并将“sss”添加到纽约州，sss将保留在站点上，直到我手动刷新页面

之前：

之后：

我要寻找的是一种方法，确保单击“取消”时所有内容都恢复到其原始状态。我还包括了一些正在使用的代码片段。也就是说，我不确定哪个代码对这个问题最重要

<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>

编辑客户端
&时代；
客户名称：
客户编号：
取消
拯救

您没有显示任何片段，以显示模态的实际显示方式，以及对象如何传递给它。但我认为问题在于，当您应该对数据的副本进行操作时，您将引用传递给了表中显示的相同对象

因此，在打开模态文件时，应复制选定对象并在此副本上执行操作。更改不会反应性地反映在表中，因此保存后必须更新表中显示的记录。在这种情况下，您不必担心取消后恢复更改

---

从用户体验的角度来看，使用modal时，保存后更新记录也比键入时更新记录更好。

复制的想法听起来不错，但我如何调用对象的副本而不是对象本身呢？我在原来的帖子中添加了更多的代码，以便澄清。请您也添加负责显示模态的部分。显示单击编辑按钮操作的部分？