In a nutshell, the issue stems from a missing 'this' when referencing the @Input'ed variables.
Currently, I have a parent class that will eventually showcase a list of "QuestionComponents".
The pertinent section of the parent class template is shown below:
<question [(justText)]="testText" [(justObj)]="testObj" [(myQuestion)]="singleQuestion"></question>
Essentially, I retrieve the "singleQuestion" object from an HTTP service call. The Question class, from which "singleQuestion" originates, features a basic "toString" method for streamlined output debugging.
testText, textObj, and singleQuestion are progressively complex objects as I conduct tests. Currently, there's only one "question" as I build my comprehension.
The child "QuestionComponent" has the following structure:
@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");
}
}
Eventually, I anticipate substantial interaction with the passed objects in the QuestionComponent. My initial approach was to pass the Question object into the constructor directly, but that didn't seem feasible. For now, I implemented the onClick button to experiment with modifying an @Input'ed variable.
The child component's template unfolds like this:
<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 can I access the @Input'ed objects within the class? Specifically, how do I modify "myQuestion" in the 'onClick()' function? Furthermore, how can I ensure that changes to the objects reflect on the view?
Notably, I've attempted to pass the value from the 'view' back through the onClick call by altering the button to:
<button (click)="onClick(myQuestion)">Clickit</button>
And adjusting onClick to:
onClick(q) { q.generalInfo.label = "changed"; }
This attempt did not yield the desired outcome.