使用setter方法更改变量时，Angular 2不绑定

Question

我有以下AngularJS 2实例，我的问题是，当调用setter方法setCourse ，新数据“ java”无法反映到UI。 因此，应该显示“ java”而不是“ x，y，z”，但不会显示。

import {Component} from 'angular2/core'

@Component({selector:'course',
template: `
<ul> <li *ngFor="#x of courses">  {{ x }}</li> </ul>`
})
export class CourseComponent {
private courses: string[] = ['x ' , 'y ' , 'z'];

public setCourse(courses:string[]){
    this.courses = courses;
}

}

---

import {Component} from 'angular2/core';
import {CourseComponent} from './course.component'

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><course></course>',
    directives:[CourseComponent],
    providers:[CourseComponent]
})
export class AppComponent {
private newCourses:string[];

public constructor(courseComponent: CourseComponent){
    courseComponent.setCourse(['java'])
}
 }

Answer 1

这是因为您要更改不同实例的变量。

您可以利用ViewChild来获取实例模板中定义的CourseComponent实例，只有在ngAfterViewInit钩子之后，您才能触发更改：

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><course></course>'
})
export class AppComponent {
  @ViewChild(CourseComponent) courseComponent;
  ngAfterViewInit() {
    this.courseComponent.setCourse(['java'])
  }
}