Angular 2 无法访问属性混乱

Question

我正在学习 Angular 2 并且对它相当陌生，今天我正在尝试使用 angular 2 中的 EventEmitter 允许组件传递数据。我想要做的是在单击事件上调用一个服务方法，returns 一个承诺。然后我想将结果发送回父组件。我有一个组件，在按钮上有一个点击事件，它调用一个注入的服务，该服务以 Promise 的形式 returns 数据，但在 "then" 内，我试图发回数据，但我的 EventEmitter未定义。

如果我在 then 之外调用 emit，它工作正常，我是否缺少对父范围的某种绑定？或者在这里使用 Promise 是错误的，它应该是订阅？任何帮助将不胜感激。

这里是组件代码

import { Component, Output, Input, Injectable, EventEmitter } from '@angular/core';
import { Search } from '../Shared/models/search';
import { SearchResult } from '../Shared/models/searchResult';
import { SearchService } from '../Service/search.service';

@Component({
    selector: 'search',
    template: `<div class="col-sm-12">
                    <div class="input-group">
                        <input [(ngModel)]="search.searchText" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-default" (click)="searchFor()" >Go!</button>
                        </span>
                    </div>
                </div>`
})


@Injectable()
export class SearchComponent {
    constructor(private searchService: SearchService) { }

    @Input() search: Search
    @Output() errorMessage: string;
    @Output() onSearchChange = new EventEmitter<SearchResult[]>();

    searchFor() {
        this.searchService.search(this.search).then(function (results) {
            console.log("Value");
            console.log(results);
            this.onSearchChange.emit(results);
        });
    }
}
}

Answer 1

为了能够保持 this 的范围，您需要使用粗箭头语法，因此更改

this.searchService.search(this.search).then(function (results) {

至：

this.searchService.search(this.search).then(results => {

更多信息来自这里的优秀答案：How does the "this" keyword work?

Angular 2 无法访问属性混乱

Angular 2 Unable to access propery confusion

eventemitter

angular

Angular 2 无法访问 属性 混乱

Angular 2 Unable to access propery confusion

eventemitter

angular

Angular 2 无法访问属性混乱