时间戳

首页 > 解决方案 > 如何避免 Angular 8 中的双向数据绑定

angular - 如何避免 Angular 8 中的双向数据绑定

问题描述

我正在 Angular 8 中构建一个应用程序，但我遇到了以下关于数据绑定的问题。

我有一张数据表。我想编辑一个特定的条目。所以，在app.component.html中，我有：

<table>
   <tr *ngFor="let entry of entries">
      <th>{{ entry.asset }}</th>
      <th>{{ entry.model }}</th>
      <th>{{ entry.ip }}</th>
      <th>
         <a (click)="editIconPressed(entry)"><i class="material-icons">create</i></a>
      </th>
   </tr>
</table>

在app.component.ts中，我有相应的功能：

editIconPressed(entry: Entry): void {
   this.edittedEntry = entry;
   this.showEditModal = true;   
}

使用变量showEditModal，打开一个模态，以便编辑所选条目。模态的代码在同一个文件app.component.html中。

<div class="modal" [style.display]="showEditModal ? 'block' : 'none'">
   <div class="modal-content edit-entry-modal-width">
      <form #editEntryForm="ngForm">
         <input class="edit-entry-form-input-field" type="text" [(ngModel)]="edittedEntry.asset" name="model">
         <input class="edit-entry-form-input-field" type="text" [(ngModel)]="edittedEntry.model" name="serial">
         <input class="edit-entry-form-input-field" type="text" [(ngModel)]="edittedEntry.ip" name="serial">
         <button class="btn btn-success" type="submit" (click)="editEntrySaveBtnPressed()">Save</button>      
      </form>
      <button class="btn btn-primary" (click)="closeModal()">Cancel</button>
   </div>
</div>

因此，用户可以自动编辑表单，由于双向数据绑定，模态后面的表格条目也会发生变化。如果用户按下“保存”按钮，editEntrySaveBtnPressed()则调用函数并更新数据库以及模板内的表。

但是，如果用户按下“取消”按钮，closeModal()则会调用刚刚关闭模式的函数。不幸的是，尽管用户取消了编辑，但模板中表格的更改仍然存在。

editEntrySaveBtnPressed(): void {  
            this.entryService
                .editEntry(this.edittedEntry)
                .subscribe(res => {
                    this.edittedEntry = { _id: '', asset: '', model: '', ip: '' };
                    this.showSuccessMsgForEdit = true;
                    setTimeout(() => { this.closeModal(); } , 2000);
                }, err => {
                    this.errorMsg = err;
                    this.showErrorMsg = true;
                });
}

closeModal(): void {
        this.edittedEntry = { _id: '', asset: '', model: '', ip: '' };
        this.showEditModal = false;
}

没有在模板内的表格上传递更改的任何想法？

谢谢您的帮助！！！

标签： angulartypescriptangular8

解决方案

您正在以下行中的 objects entry 和 edittedEntry 之间共享引用

 this.edittedEntry = entry;

因此在将 entry 的值复制到 edittedEntry 时需要使用 Object.assign({}, entry} 或 {...entry}。

保存时使用索引将值更新回条目中，例如，

this.entry[selectedIndex] = {...this.edittedEntry}

推荐阅读