Question

我的问题-

我有一个客户地址字段，我正在通过从db中检索它并绑定它来显示它的值。现在，我尝试实现内联编辑功能。当用户单击该地址值时，它将变成一个仍显示原始值的文本框。现在，在编辑/更改了一些文本之后，随着用户单击出texbox或“ tabs”，它会再次返回到原始标签字段，但仍仅显示旧值，而不显示新值。当然，我正在更新数据库中的值，并且它正在完美地更新。但我想显示的是绑定到标签的新更新值，而不是旧值。一种方法是再次调用检索并绑定代码。我想简单地避免。没有意义。

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

。一些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!');
            }
        })
}

您可以理解，再次调用bind函数不是我的目标。我正在努力避免这种情况。从我阅读的有关此类场景的一些文章中，我似乎不得不使用某种第三种[临时控件]，它将基本上显示新值。或者，也许我错了，并且有一个更好的主意。我真的需要一些指导。相当困惑！

Answer 1

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

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

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

如果您有多个人在编辑相同的信息，则可能会出现问题，但这与此处的情况不一样。

Answer 2

您似乎没有使用双向绑定吗？

代替此：

[value]="this.addressVar"

考虑使用此：

[(ngModel)]="this.addressVar"

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

2 个答案: