Angular 2 шаблон змінної не оновлюється - кутовий, angular2-шаблон

У мене є змінна класу під назвою queryData, яка зберігає відповідь json, отриману за допомогою http get. Однак шаблон не оновлюється з отриманим json.

Мій головний.ц

import {bootstrap}    from "angular2/platform/browser";
import {AppComponent} from "./app.component";
import { HTTP_PROVIDERS } from "angular2/http";

bootstrap(AppComponent,[ HTTP_PROVIDERS ]);

app.components.ts

import {Component} from "angular2/core";
import {QueryInputComponent} from "./query-input.component"
import {QueryOutputComponent} from "./query-output.component"

@Component({
selector: "ci",
template: `<div>
<query-input></query-input>
<query-output></query-output>
</div>`,
directives: [QueryInputComponent,QueryOutputComponent],

})
export class AppComponent { }

query-input.component.ts

import {Component} from "angular2/core";
import {NgForm} from "angular2/common";
import {Injectable}     from "angular2/core";
import {Http, Response} from "angular2/http";
import {Observable}     from "rxjs/Observable";
import "rxjs/Rx";
import {QueryOutputComponent} from "./query-output.component"
import {QueryOutputData} from "./query-data.service";

@Component({
selector: "query-input",
templateUrl: "app/query-input.html",
providers: [QueryOutputComponent,QueryOutputData],
})

@Injectable()
export class QueryInputComponent {
constructor( private t1:QueryOutputComponent) { }
onClick(queryForm: NgForm)
{
//console.log(queryForm.value);
let from_timestamp= queryForm.value.from_timestamp;
let to_timestamp= queryForm.value.to_timestamp;
/*let time_range = queryForm.value;
for (var property in time_range) {
if (time_range.hasOwnProperty(property)) {
if(time_range[property]<10)
{
time_range[property]="0"+time_range[property];
}
//console.log(time_range[property]);
}
}
let from_timestamp :string=String(time_range.from_year)+"-"+String(time_range.from_month)+"-"+String(time_range.from_date)+"T"+String(time_range.from_hour)+":"+String(time_range.from_minute)+":"+String(time_range.from_second)+"Z";
let to_timestamp :string=String(time_range.to_year)+"-"+String(time_range.to_month)+"-"+String(time_range.to_date)+"T"+String(time_range.to_hour)+":"+String(time_range.to_minute)+":"+String(time_range.to_second)+"Z";
console.log(from_timestamp);
console.log(to_timestamp);*/
this.t1.passUrlParams(from_timestamp,to_timestamp);
}

}

query-output.component.ts

import {Component,Input} from "angular2/core";
import {QueryOutputData} from "./query-data.service";
@Component({
selector: "query-output",
template: `<h1>give query output hereeee</h1>
<div>{{queryData | json}}</div>`,
providers: [QueryOutputData]
})
export class QueryOutputComponent{
queryData:Object;
compute()
{
console.log("Rock and roll");
console.log(this.queryData);
}
constructor(private data: QueryOutputData){ }
passUrlParams(from_timestamp:string,to_timestamp:string)
{
console.log(this.queryData);
let h="blah";
console.log("Working");
console.log(from_timestamp);
console.log(to_timestamp);
let url="http://127.0.0.1:8000/v1/ct/aws/q100/blah/"+from_timestamp+"/"+to_timestamp+"/";
this.data.getTemp(url).subscribe(res => { this.queryData=res; this.compute();});
}

}

Тут змінна queryData оновлюється відповіддю json, але шаблон не оновлюється відповідним чином. Будь ласка, дайте мені знати, де я можу помилитися.

Відповіді:

Проблема в тому

constructor( private t1:QueryOutputComponent) { }

Куточки DI вводять новий екземпляр дещо новий QueryOutputComponent клас, але, ймовірно, не той екземпляр компонента, якого ви насправді хочете. Введення компонента працює лише для батьківського компонента.

Наприклад, для доступу до компонентів у представленні вашого компонента

// not yet assigned when the constructor is executed
@ViewChildren(QueryOutputComponent) queryOutputComponent:QueryOutputComponent;

// but available in
ngAfterViewInit() {
console.log(this.queryOutputComponent);
}