Interact with object passed to Angular2 component as Input

Question

(to save some reading -- the problem boiled down to a missing 'this' when referencing the @Input'ed variables)

I have a parent class - this will (eventually) display a list of "QuestionComponents".

The relevant part of the parent class template is as follows:

<question [(justText)]="testText"  [(justObj)]="testObj" [(myQuestion)]="singleQuestion"></question>

Suffice it to say I'm getting the "singleQuestion" object from a http service call. the Question class, of which "singleQuestion" is an instance, has a basic "toString" method for easier output debugging.

testText, textObj, and singleQuestion are all just objects of increasing complexity for me as I tested. For now it's very basic and only has one "question" as I work on my understanding.

The child "QuestionComponent" looks like this:

@Component ({
    selector:
        'question',
    templateUrl:
        './app/components/question/question.component.html',
    directives: [FORM_DIRECTIVES],

})


export class QuestionComponent {

    @Input() myQuestion:USGSQuestion
    @Input() justText:string
    @Input() justObj:object

     constructor() {

    }

    onClick() {
        myQuestion.generalInfo.label = "changed";
        console.log("change attempted");
    }
}

Note that as time moves on, I'll need to be able to do some heavy interaction with the objects that are passed into the QuestionComponent. In fact, my preference was to just pass the Question object into the constructor, but passing data into the component constructor doesn't seem to work for some reason. (I digress) To attempt to check how I can interact with passed data , I built the onClick button and tried to change something in one of the @Input'ed variables.

The template for the child object is as so:

<div *ngIf="!justText">
    no text passed
</div>
<div *ngIf="justText">
    <b>Here is the passed Text:</b><br>
     {{justText}} <br>
</div>
<br>
<div *ngIf="!justObj">
    no obj passed
</div>
<div *ngIf="justObj">
    <b>Here is the passed JSON:</b><br>
     Foo: {{justObj.foo}} <br>
     Baz: {{justObj.baz}}
</div>
<br>
<div class="question">
    <i>I am a question spot</i>

    <div *ngIf="!myQuestion">
        Loading Question...
    </div>
    <div *ngIf="myQuestion">
        <b>Here is the passed question:</b><br>
         {{myQuestion}} <br>
    </div>
</div>

<button (click)="onClick()">Clickit</button>

How do I get a reference to the @Input'ed objects inside the class? (in this case, how would I modify "myQuestion" in the 'onClick()' function? ... and, secondarily, how would I ensure changes to the objects got passed to the view and updated?

---

I should note I already tried to pass the value from the 'view' back through the onClick call, like so: (change button to:)

<button (click)="onClick(myQuestion)">Clickit</button>

(and change onClick to:)

onClick(q) { q.generalInfo.label = "changed"; }

This did not work.

Answer 1

I'm an idiot.

After a few hours of research and searching (Before asking) it all came down to adding "this".

... as in "myQuestion.generalInfo.label = "changed";" should have been "this.myQuestion.generalInfo.label = "changed";"

Some days you gotta love programming, eh?