(etwas zu lesen speichern - das Problem eines fehlenden ‚this‘ eingekocht, wenn Referenzierung der @ Input'ed Variablen)Interact mit dem Objekt zu Angular2 Komponente als Eingaben über
Ich habe eine Elternklasse - dies wird (eventuell) eine Liste von "QuestionComponents" anzeigen.
Der relevante Teil der Vorlage übergeordneten Klasse ist wie folgt:
<question [(justText)]="testText" [(justObj)]="testObj" [(myQuestion)]="singleQuestion"></question>
es Ich erhalte die „singleQuestion“ Objekt von einem http-Service-Aufruf Es genügt zu sagen. Die Question-Klasse, von der "singleQuestion" eine Instanz ist, hat eine einfache "toString" -Methode für ein einfacheres Debuggen von Ausgaben.
testText, textObj und singleQuestion sind alles nur Objekte von zunehmender Komplexität für mich, wie ich getestet habe. Für jetzt ist es sehr einfach und hat nur eine "Frage", wie ich an meinem Verständnis arbeite.
Das Kind „QuestionComponent“ sieht wie folgt aus:
@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");
}
}
Beachten Sie, dass im Laufe der Zeit bewegt, werde ich fähig sein müssen einige schwere Interaktion mit den Objekten zu tun, die in die QuestionComponent übergeben werden. Eigentlich wollte ich das Question-Objekt einfach in den Konstruktor geben, aber das Übergeben von Daten an den Komponentenkonstruktor scheint aus irgendeinem Grund nicht zu funktionieren. (Ich schweife ab) Um zu überprüfen, wie ich mit übergebenen Daten interagieren kann, habe ich die onClick-Schaltfläche erstellt und versucht, etwas in einer der @ Input'ed-Variablen zu ändern.
Die Vorlage für das Kind Objekt ist wie 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>
Wie bekomme ich einen Verweis auf die @ Input'ed Objekte innerhalb der Klasse? (In diesem Fall, wie würde ich „myQuestion“ in dem ‚onClick()‘ Funktion ändern? ... und, in zweiter Linie, wie würde ich auf die Objekte Änderungen gewährleisten wurde zu der Ansicht geführt und aktualisiert?
ich stelle fest, sollte ich habe bereits versucht, den Wert aus dem ‚Ansicht‘ durch die, wie onClick Rückruf passieren so: (Taste ändern
an :)<button (click)="onClick(myQuestion)">Clickit</button>
(und onClick
onClick(q) { q.generalInfo.label = "changed"; }
Das hat nicht funktioniert.