Question

我有这个组件，它将一个方法传递给另一个组件。它是这样做的：

constructor(
  public categoryData: CategoryDataService
) {
}

传递该方法的html如下所示：

[list]="categoryData.list"

只要list方法没有参数，就可以正常工作。现在，我有一个具有参数的方法，但是我可以从 component 获取参数，因此我创建了一个包装方法，如下所示：

listCriteria() {
  this.criteriaData.list(this.category.id);
}

但是，当我添加此html时：

[list]="listCriteria"

给我一个错误：

错误TypeError：无法读取未定义的属性“列表”

仅供参考，这是该服务的外观：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http/src/response';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { ICriteria } from './interfaces/criteria.shared';

const API_URL = environment.apiUrl;
const API_Path = '/criteria';

@Injectable()
export class CriteriaDataService {
  constructor(private _http: HttpClient) { }

  public list = (categoryId: string, includes?: string): Observable<ICriteria[]> => {
    return this._http
      .get<ICriteria[]>(API_URL + API_Path, { params: { categoryId: categoryId, includes: includes || '' } })
      .catch(this.handleError);
  }

  private handleError(error: HttpErrorResponse) {
    return Observable.throw(error);
  }
}

Answer 1

函数的this关键字在JavaScript中的行为略有不同。

this的值取决于函数的调用方式。

将函数传递给其他组件时，需要确保将在正确的上下文中调用它。

简单的方法就是使用您在服务中使用的相同方法： instance arrow function

listCriteria = () => this.criteriaData.list(this.category.id);

通过这种方式this将引用正确的组件实例。

Angular4无法读取未定义的属性“列表”

1 个答案: