Question

我有以下AngularJS 2 cide，我的问题是当调用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'])
  }
}

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

1 个答案: