Angular 2：属性变得未定义答案

【问题标题】：Angular 2: property becomes underfinedAngular 2：属性变得未定义
【发布时间】：2017-08-26 19:22:03
【问题描述】：

问题是传递给子视图的属性变成了undefined：

父组件：

@Component({
    selector: 'app-searchbox',
    template: `
            <app-artifact-list [artifacts]="searchResults"></app-artifact-list>
    `
})
export class SearchboxComponent implements OnInit {

    // explicitly initialize the property 
    // the same effect with constructor initialization
    searchResults: Artifact[] = [new Artifact()];

    constructor(private artifactService: ArtifactService) {
    }

    ngOnInit(): void {
        this.pollService(this.artifactService.findByQuery('guice'));
    }

    private pollService(request: Observable<Artifact[]>) {
        return request.subscribe(this.fillInResults);
    }

    private fillInResults(result: Artifact[]) {
        result.forEach(console.log);
        for (let obj of result) {
            // this.searchResults is undefined! why?
            this.searchResults.push(obj);
        }
    }

}

子组件：

@Component({
    selector: 'app-artifact-list',
    template: `
            <h1>{{_artifacts | json}}</h1>
    `
})
export class ArtifactListComponent implements OnChanges {

    private _artifacts: Artifact[] = [];

    ngOnChanges(changes: SimpleChanges): void {
        console.log('Property changed');
    }

    @Input()
    set artifacts(artifacts: Artifact[]) {
        console.error('Property changed');
        this._artifacts = artifacts;
    }

}

在构造函数调用期间，我看到该属性已正确初始化，但在回调方法中它变为undefined。

这不是和this有某种关系吗？也许this.searchResults 指的是回调中的其他任何内容？

【问题讨论】：

标签： javascript angularjs angular typescript binding

【解决方案1】：

在对this在“函数引用”范围内使用时进行了一些调查后，我发现this实际上是指另一个对象。我喜欢 javascript :)

所以解决方法是：

private pollService(request: Observable<Artifact[]>) {
    return request.subscribe(
        this.fillInResults.bind(this)
    );
}

private fillInResults(result: any) {
    result.forEach(console.log);
    for (let obj of result) {
        this.searchResults.push(obj);
    }
}

或者使用粗箭头函数：

private pollService(request: Observable<Artifact[]>) {
    return request.subscribe(
        result => this.fillInResults(result)
    );
}

private fillInResults(result: any) {
    result.forEach(console.log);
    for (let obj of result) {
        this.searchResults.push(obj);
    }
}

详细解释请看这个问题：Angular2 component's “this” is undefined when executing callback function

【讨论】：