更新内容时，Angular 4 X-editable 表单值不会更改

Question

正如我试图解释标题中的情况，我在 Angular 4 中遇到了 jQuery X-editable 库的问题。

我有一个 View 如下:

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>

如您所见，出于某种原因，我必须创建 2 个不同的指令，分别称为 editableToggle 和 editable。这可能是另一个问题的主题。对于这个问题，这里是这些指令的结构。

editable-toggle.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');
    }
}

editable.directive.ts

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 https://plnkr.co/edit/Moq3jUEbSCIS4HDO6jPq?p=preview

Answer 1

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