cyberbeast cyberbeast - 19 days ago 8
TypeScript Question

How to pass the value of an expression back to data target in angular2?

I am trying to pass back the id of an element back to my target. I have multiple ace-editor instances on my page. I would like to know which one is sending me a "textchanged" event, so that I can sync the content of the correct tuple in my array.

<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>


My typescript code is as follows:

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;
}


This implementation does not work. I can't seem to figure out what is wrong. Also, is this the best way to do this? I need to keep track of changes made in different ng2-ace-editor instances.

Answer

You can send the card id in the onChange event:

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

The problem you are probably having is that you have these {{ brackets in your click handler and these are not necessary here. This will work:

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

However I don't believe you need this function. Hope this helps!