在角度5/6中进行编辑后如何保存更改? [英] How to save changes after editing in angular 5/6?

问题描述

我正在建立一个帐户信息页面.我想允许编辑并保存更改(即:名称)，但是我又得到了相同的旧名称.我的代码如下

I am building an account information page. I want to allow edit and save the changes (ie: name), but i get the same old name back. My code is as follows

<div >
    <mat-form-field class="simple-form-field-50" *ngIf="isEditEnable">
      <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <span *ngIf="!isEditEnable">Name : {{user?.givenName}} </span>
    <button style="border:0;" *ngIf="!isEditEnable" (click)="onEdit()"><span><mat-icon style="font-size:16px;" matSuffix>create</mat-icon></span></button>
    <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">Submit</button>
</div>

TS代码:

export class ProfileComponent implements OnInit {
  user: User;

  constructor(
    private http: HttpClient,
    ) { }

  isEditEnable = false;

  ngOnInit() {
    this.http.get<User>('/api/user/details', {})
        .subscribe((user) =>  {
          this.user = user;
        });
  }
  onEdit() {
  this.isEditEnable = !this.isEditEnable;
  }
}

代码输出:

[1]( https://imgur.com/nxiExeH.png )

点击编辑"按钮后:

[2]( https://imgur.com/599SIF4.png )

点击提交后，它会恢复原名称而不会更改

After clicking submit, it gives old name back without changing

[3]( https://imgur.com/nxiExeH.png )

推荐答案

好吧，看来您永远不会更新用户的name属性，并且记得要更新数据库中的用户(为此，您需要添加端点)

Ok, it looks like you never update the name property on the user, as well as remember to update the user in database (for this you'll need to add an endpoint)

<div >
    <mat-form-field class="simple-form-field-50" *ngIf="isEditEnable">
        <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>
    <span *ngIf="!isEditEnable">Name : {{user?.givenName}} </span>
    <button style="border:0;" *ngIf="!isEditEnable" (click)="onEdit()">
        <span><mat-icon style="font-size:16px;" matSuffix>create</mat-icon></span>
    </button>
    <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">
        Submit
    </button>
</div>

export class ProfileComponent implements OnInit {
    user: User;
    name: string;

    constructor(
      private http: HttpClient,
    ) { }

    isEditEnable = false;

    ngOnInit() {
      this.http.get<User>('/api/user/details', {})
          .subscribe((user) =>  {
            this.user = user;
          });
    }

    // assume you have or will add an endpoint to handle user update
    updateUser(user) {
        this.http.put((`/api/user/${this.user.id}`, this.user))
    }

    onEdit() {
        if (this.isEditEnable && this.user.givenName !== this.name) {                
                // assign new name to the user
                this.user.givenName = this.name;
                // use api update the user in your database
                this.updateUser()
        }
        this.isEditEnable = !this.isEditEnable
    }
}

以下内容转到后端部分(假设您可能将节点与express一起使用?)您的路由器可能有一个名为 users.js 的文件，您在其中定义了一个获取端点，如下所示:

The following goes to backend portion (assume you use node with express maybe?) Your router probably has file that is named users.js, there you have a get endpoint defined as following

this.router.get('details', someFunctionThatGetsUser);

您将需要再添加一个

this.router.put('/:id', functionToUpdateUserInDB);

并在用户服务中添加一个功能，以在数据库中更新该功能

and add a function in your user service that updates it in DB

这篇关于在角度5/6中进行编辑后如何保存更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！