Question

我有一个名为queryData的类变量，它存储使用http get收到的json响应。但是，模板不会使用收到的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 { }

查询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);
  }

}

查询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();});
  }

}

此处使用json响应更新queryData变量，但模板未相应更新。请告诉我可能出错的地方。

Answer 1

问题是

constructor( private t1:QueryOutputComponent) { }

Angulars DI注入某些新QueryOutputComponent类的新实例，但可能不是您真正想要的组件实例。注入组件仅适用于父组件。

用于访问组件视图中的组件，例如

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

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

Angular 2模板变量未获得更新

1 个答案: