所以我有一个包含来自服务器的数据的表单。
如果表单已更改，我会显示2个按钮：保存并取消。保存时，新数据将发送到服务器，取消时我需要将数据回滚到先前的状态。我认为向服务器发出get请求可能很简单，但似乎无法正常工作。
import { ContactService } from './../-services/contact.service';
import { Component, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import {FormsModule} from "@angular/forms"
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.scss'],
providers: [ContactService]
})
export class ContactComponent implements OnInit {
contact;
userID;
ischanged = false;
constructor(
private Router: Router,
private Route: ActivatedRoute,
private cs: ContactService,
public snackBar: MatSnackBar
) { }
ngOnInit() {
this.userID = this.Route.snapshot.paramMap.get('id');
this.getContact();
}
getContact() {
this.cs.getContact(this.userID)
.subscribe(res => {
let userArr = [res.json()];
this.contact = userArr[0]; // тут потом чекнуть, а то слегка бред с массивом
console.log(this.contact);
});
}
changed(x) {
this.ischanged=!this.ischanged
}
update(contact) {
this.cs.updateContact( contact )
.subscribe(res => {
console.log(res)
alert('updated')
})
};
openSnackBar(message: string, action: string, duration: number) {
this.snackBar.open(message, action, {
duration: duration,
});
}
delete(){
this.cs.deleteContact( this.userID )
.subscribe(response => {
console.log(response);
this.openSnackBar('Контакт был удален', 'OK', 5000);
this.Router.navigate(["../list/contact"])
});
}
abort() {
alert('data rolled back');
}
}
这是我的模板
<div class="contact">
<div class="cc">
<div class="c_content">
<div class="c_header">
<p class="c_header-name">{{contact?.name}} </p>
<p class="c_header-company">{{contact?.company.name}} </p>
<button mat-icon-button [matMenuTriggerFor]="menu" class="c_header-menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="delete()">
<mat-icon>delete</mat-icon>
<span>Удалить</span>
</button>
</mat-menu>
</div>
<mat-tab-group>
<mat-tab label="Tab 1">
<form class="c_info" #f="ngForm" id="ngForm" (ngSubmit)="update(f.value)">
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Имя</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.name}}" name="name" #name="ngModel" (change)="changed(name)" value="{{contact?.name}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Фамилия</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.username}}" name="username" #username="ngModel" (change)="changed(username)" value="{{contact?.username}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Телефон</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.phone}}" name="phone" #phone="ngModel" (change)="changed(phone)" value="{{contact?.phone}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Email</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.email}}" name="email" #email="ngModel" (change)="changed(email)" value="{{contact?.email}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Компания</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.company.name}}" name="companyname" #companyname="ngModel" (change)="changed(companyname)"
value="{{contact?.company.name}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Адрес</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.address.city}}" name="addresscity" #addresscity="ngModel" (change)="changed(addresscity)"
value="{{contact?.address.city}}">
</div>
</div>
<!-- end cc_item -->
<!-- begin cc_item -->
<div class="cc_item">
<div class="cc_item_label">
<span>Вебсайт</span>
</div>
<div class="cc_item_value">
<input maxlength="100" ngModel="{{contact?.website}}" name="website" #website="ngModel" (change)="changed(website)" value="{{contact?.website}}">
</div>
</div>
<!-- end cc_item -->
</form>
</mat-tab>
<mat-tab label="Tab 2"> some text </mat-tab>
</mat-tab-group>
</div>
<div class="cc_btn_group" [ngClass]="{'active':ischanged}">
<button mat-raised-button color="primary" form="ngForm">АГОНЬ!</button>
<button mat-raised-button type="button" (click)="abort()">Отмена</button>
</div>
</div>
<div class="c_tasks">
<tasks></tasks>
</div>
</div>
答案 0 :(得分：0)
尝试此方法：保留取消更改的旧值
contact: any;
oldContact: any;
getContact() {
this.cs.getContact(this.userID)
.subscribe(res => {
let userArr = [res.json()];
this.contact = userArr[0]; // тут потом чекнуть, а то слегка бред с массивом
this.oldContact = JSON.parse(JSON.stringify(userArr[0])); // тут потом чекнуть, а то слегка бред с массивом
console.log(this.contact);
});
}
abort() {
this.contact = JSON.parse(JSON.stringify(this.contact));
alert('data rolled back');
}