如何将表达式的值传递回angular2中的数据目标?

时间:2016-11-18 23:39:32

标签: angular typescript angular2-template

我正在尝试将元素的id传回给我的目标。我的页面上有多个ace编辑器实例。我想知道哪一个给我发了一个" textchanged"事件,以便我可以同步我的数组中正确元组的内容。

<md-grid-tile *ngFor="let card of function_cards">
    <md-card>
        Some content here.
    <pre>{{card.code}}</pre>
    <pre>{{card.id}}</pre>

    <div ace-editor 
       [text]="code"
       [mode]="'python'"
       [theme]="'eclipse'"
       [options]="options"
       [readOnly]="false"
       [autoUpdateContent]="true"
       (textChanged)="onChange($event)"
       style="min-height: 200px; 
       width:100%; 
       overflow: auto;" 
       (click) = "setId({{card.id}})"></div>
    </md-card>
</md-grid-tile>

我的打字稿代码如下:

private function_cards: CodeEditor[] = [{
    id: 1, 
    code: "something"
},
{
    id: 2,
    code: "something else"
}];

setId(id: number){
    this.text_editor_id = id;
    console.log("CLICKED ON: " + id)
}

onChange(code) {
    console.log("new code", this.text_editor_id);
    this.function_cards[this.text_editor_id].code = code;
}

此实施不起作用。我似乎无法弄清楚出了什么问题。另外,这是最好的方法吗?我需要跟踪在不同的ng2-ace编辑器实例中所做的更改。

1 个答案:

答案 0 :(得分:2)

您可以在onChange事件中发送卡片ID:

 (textChanged)="onChange($event, card.id)"

你可能遇到的问题是你的点击处理程序中有{{括号,这里不需要这些。这将有效:

 (click)="setId(card.id)"

但是我不相信你需要这个功能。希望这有帮助!