使用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'])
  }
}