Question

感谢花时间阅读我的帖子。

我希望更有经验的Angular Developers可以帮助我解决这个错误。在组件中的组件中调用对话框没有问题，在对话框中有订阅和返回错误。但是一旦我将其转移到服务中，并将其改为承诺，我就会收到以下错误。

我认为这与将observable转换为promise

有关

未捕获（承诺）：TypeError：无法读取属性＆＃39; dialog＆＃39;未定义的 TypeError：无法读取属性＆＃39; dialog＆＃39;未定义的

以下是我服务中的代码：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { MatDialog } from '@angular/material';
import { NotificationDialogComponent } from 
  './dialog/notification/notification.dialog';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class TestService {

constructor(
private http: Http,
private dialog: MatDialog
) { }

public PostFakeInfo() {
const url = 'http://www.mocky.io/v2/59f73b612f00002510558579';
const mockRequest = {email: 'abc@def.com', password: 'abcdef'};
return this.http.post(url, mockRequest)
  .toPromise()
  .then(response => response.json())
  .catch(this.handleError);
}

private handleError(error: any) {
 console.error(error);
 const dialogRef = this.dialog.open(NotificationDialogComponent, {
  data: {
    title: 'Error',
    message: 'Error Message'
  }
 });
}

额外信息：Angular Material版本2.0.0-beta.12 如果您需要完整的代码，可以使用回购。 https://edmondtm@bitbucket.org/edmondtm/dialog-error.git

Answer 1

您在handleError函数中没有类的this上下文，因为您直接传递它。相反，请使用箭头（或Lambda）函数来保留您的范围。

.catch(error => this.handleError(error))

另请参阅此答案：https://stackoverflow.com/a/37990958/2227788

关于JavaScript范围的详细阅读：https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/

关于箭头功能的详细阅读：https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/

Md-Dialog返回组件中的对话框，但不返回服务内部

1 个答案: