Angular 内容更新时，角度4 X可编辑表单值不会更改

正如我试图在标题中解释的那样，我对

angular4

中的

jQuery X-editable

库有问题

我有一个

视图

，如下所示：

model.html

<a href="javascript:;" onClick="event.stopPropagation(); event.preventDefault();" editableToggle="#editable{{selectedModel.id}}"><i class="fa fa-pencil"></i></a>
<div id="editable{{selectedModel.id}}" class="editable-textarea" editable type="textarea" url="/api/model-info" name="info" pk="{{selectedModel.id}}">
    {{selectedModel.info}}
</div>

可编辑的.directive.ts

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
    selector: '[editableToggle]'
})
export class EditableToggleDirective {
    @Input() editableToggle: string;

    constructor(private el: ElementRef) {}

    @HostListener('click') onClick(){
        $(this.editableToggle).editable('toggle');
    }
}

import {Directive, ElementRef, Input, AfterViewInit} from '@angular/core';

@Directive({ selector: '[editable]' })
export class EditableDirective implements AfterViewInit {
    @Input() type: string;
    @Input() url: string;
    @Input() name: string;
    @Input() pk: number;

    directive: any;

    constructor(el: ElementRef){
        this.directive = $(el.nativeElement);
    }

    ngAfterViewInit(){
        var token = $('meta[name="csrf-token"]').attr('content');

        var options = {
            type: this.type,
            url: this.url,
            name: this.name,
            pk: this.pk,
            rows: 10,
            originalTitle: 'Title',
            toggle: 'manual',
            emptytext: 'Empty',
            ajaxOptions: {
                type: 'post',
                dataType: 'json'
            },
            params: function (params) {
                params._token = token;
                return params;
            }
        };

        this.directive.editable(options);
    }
}

首先，x-editable仅适用于最初选择的模型。我这里的问题是，当我用不同的ID和信息更改

selectedModel

时，即使HTML值已正确更改，初始模型的信息也会写入x-editable弹出表单，而不是所选模型的信息

我试图尽可能基本地解释情况。如果我错了或者你的评论遗漏了什么，请纠正我

谢谢你的帮助

---

编辑：为此问题创建了一个plunker

将可编辑前缀添加到{{selectedModel.info}