编辑:OP的评论:“对不起,但我想我在环境/环境中有轻微的错误,抱歉浪费你的时间,现在似乎工作了”

我在将数据从app组件传递到角度为2的子组件时遇到问题 . 我最近开始玩角度2并试图了解它是如何工作的 . 我尝试使用本教程中显示的概念将数据传递给子组件

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

但我想我错过了一些东西

这是我的项目:App组件:

import { Component, ViewChild } from '@angular/core';
import { WorkflowService } from './components/workflow_display/workflow.service';
import { WorkflowDisplayComponent } from './components/workflow_display/workflow-display.component';
import { PropertyService } from  './shared/property.service';
import '../../public/css/styles.css';

@Component({
  selector: 'my-app',
  template: require('./app.component.html')


})

export class AppComponent {
  title = 'Hello World';
  @ViewChild("taskDisplay") workflowDisplay: WorkflowDisplayComponent;
  myEnvironment: String; //the variable I am trying to bind from
  errorMessage: String;
  workbenchBaseUrl : String = 'workbenchBaseUrl';
  public selectedNavID : String = 'workspace_control_workStreamView';
  public isWorkOrdersCollapsed = false;
  public isWorkStreamsCollapsed = false;



  constructor(private _propertyService : PropertyService){

  }

 ngOnInit(): void {
    this._propertyService.getValue(this.workbenchBaseUrl)
        .subscribe(environment => this.myEnvironment = environment,
            error => this.errorMessage = <any>error);

  }


}

app.component.html

<div>
<div>
<div>
<!--some html-->
           <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 mh-100">
                <workflow-display [environment] ="myEnvironment" #taskDisplay></workflow-display>
            </main>
        </div>
    </div>
</div>

WorkDisplay组件

import { Component, Input} from '@angular/core';
import { OnInit } from '@angular/core';
import { IGrcTask } from './grc-task';
import { WorkflowService } from './workflow.service';
import { PropertyService } from  '../../shared/property.service';


@Component({
    selector: 'workflow-display',
    template: require('./workflow-display.component.html')
})
export class WorkflowDisplayComponent implements OnInit {
    taskMode: string = 'workstream'; // 'workorder' or 'workstream' to currently identify the columns to display
    taskQuery: string = 'process=workstream&taskStatus=RUNNING'; // the query parameters to pass to the tasks web service
    workbenchUrl: string = 'http://localhost:8081'; // workbench URL
    workbenchTaskPage: string = 'wsIndex'; // workbench page to use to open tasks
    infoMessage: string;
    errorMessage: string;
    tasks: IGrcTask[];
    currentTask: IGrcTask;
    @Input()
    environment: String;  //the variable I am trying to bind to
    workbenchBaseUrl : String = 'workbenchBaseUrl';





    constructor() {

    }


   //called when user clicks a row
    openTask(event: any, task: any) {
        // this.environment is still undefined
        window.open(this.environment + this.workbenchTaskPage + "?taskId=" + task.taskId + "&activitiWorkflow=true");
    }







}

WorkDisplay.component.html

<--!some html-->
<tbody *ngIf='(taskMode == "workorder") && tasks && tasks.length'>
            <ng-container *ngFor='let task of tasks; let i=index'>
                <tr (click)="setCurrentTask($event, task)" (dblclick)="openTask($event, task)"
<--!some html-->

Property.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

/**
 * Service return Property value/values from the project property file
 * 
 */
@Injectable()
export class PropertyService {

    //ReST Url for the PopertyService on the back end
    private _url = '/grcworkflow/resources/grcWorkflow/environment/';

    constructor(private _http: Http) {}

    /**
     * Method return an Observable<String -> Value> for any property
     * Method make an http get call to the server to fetch the property
     * @Param key for the property in the property file 
     */
    getValue(key: String): Observable<String> {
        return this._http.get(this._url+key)
            .map((response: Response) => <String> response.text())
            .do(data => console.log('All: ' +  data))
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }

}

注意我已从可能无关的组件中删除了一些函数定义和变量 .

我试图绑定app.component环境值的myEnviroment值 . 当proerty服务返回一个字符串时,myEnviroment会被设置 . 虽然环境 Value 仍未定义 .

我正在寻找单向绑定,即当myEnvironment(父)更改环境(子)时也应该更改 . 但这似乎并没有发生 . 请帮忙