在内联编辑功能期间反映更新的值变化 Angular 4 --

Question

我的问题--

我有一个客户地址字段，我通过从数据库中检索它并绑定它来显示它的值。现在，我尝试实现内联编辑功能。当用户点击地址值时，它变成一个文本框，仍然显示原始值。现在在 editing/changing 一些文本之后，当用户点击文本框或 'tabs' 离开时，它再次恢复到原始标签字段，但仍然只显示旧值而不是新更新的值。当然，我正在更新 DB 中的值，它正在完美更新。但我想显示绑定到标签的新更新值而不是旧值。一种方法是重新调用检索和绑定代码。我只是想避免。这毫无意义。

所以，有什么窍门？如何才能做到这一点？我将 post 一些相关代码，以便您了解。

。一些 html 标记

    <tr style="margin-top:22px">
            <td>Address (Residential): </td>
            <td>
                <div *ngIf="ed3">
                    <input type="text" id="address_txt" (blur)="setval3($event.target.value)" [value]="this.addressVar" class="form-control" />
                </div>
                <div *ngIf="!ed3">
                    <div title="Click to Edit" class="inline-edit" id="addr_div" (click)="edit3(val)" (focus)="edit3(val)">{{this.addressVar}}</div>
                </div>
            </td>
        </tr>

。部分TS代码

    private ed3: boolean = false;
    public addressVar: any = '';

    edit3(value: any) {
    if (this.disabled) {
        return;
    }

    this.ed3 = true;
}

    setval3(value: any) {
    this.ed3 = false;
    this.fieldtoUpdate = 'customer_resaddress';
    var body =
        {
            id: this.cus_id,
            new_val: value,
            field: this.fieldtoUpdate
        }
    var _Headers = new Headers();
    _Headers.append('Content-Type', 'application/json');

    public ngOnInit() {

   //stuff I am doing to fetch and bind from DB
   //as you can see, I am using the variables now

    this.http.post('api/SampleData/GetCustomerAllDetails', JSON.stringify(body), { headers: _Headers })
        .subscribe(result => {
            this.cObjx = result.json() as CustomerD;
            this.addressVar = this.cObjx.customer_resaddress == null ? 'Not specified' : this.cObjx.customer_resaddress;
            this.phoneVar = this.cObjx.customer_phone;
            this.mobileVar = this.cObjx.customer_mobile == null ? 'Not specified' : this.cObjx.customer_mobile;
            this.officephnVar = this.cObjx.customer_officephone == null ? 'Not specified' : this.cObjx.customer_officephone;
        },
        error => console.error(error));


} 
    this.http.post('api/SampleData/UpdateCustomerDetails/values', JSON.stringify(body), { headers: _Headers })
        .take(1)
        .subscribe((response: any) => {
            if (response.success) {
                console.log('Details updated!');
            }
            else {
                console.log('Unable to update details!');
            }
        })
}

如你所见，再次调用绑定函数不是我的目的。我正在努力避免这种情况。从我读到的一些关于这种情况的文章来看，我似乎必须使用某种第三种 [临时控制]，它基本上会显示新值。或者也许我错了，还有更好的主意。我真的需要一些指导。很迷茫！

Answer 1

如果是我，我会将文本框绑定到一个 TS 变量，例如：

let addressVar = cObjx.customer_resaddress==null?'Not specified':cObjx.customer_resaddress;

双向绑定应确保在您的编辑功能期间正确更新，并且如果数据库正确更新，当您稍后查看时，初始绑定将继续正确。

如果有多个人编辑相同的信息，就会出现问题，但这里看起来不是这种情况。

Answer 2

你好像没有使用双向绑定？

而不是这个：

[value]="this.addressVar"

考虑使用这个：

[(ngModel)]="this.addressVar"

在内联编辑功能期间反映更新的值变化 Angular 4 --

Reflect updated value changes during inline-edit functionality Angular 4 --

html

inline-editing

typescript

angular