AngularJS 版本 6.* 服务方法即将出现未定义

Posted 2023-03-13

【中文标题】AngularJS 版本 6.* 服务方法即将出现未定义

【英文标题】：AngularJS Version 6.* Service method is coming up undefined

【发布时间】：2018-11-27 19:36:16

【问题描述】：

所以我只是想编写一个组件和服务，从一个视图中获取用户输入并将其传递给 api 进行验证。问题是在我的组件中，它说该服务基本上没有方法login 并且即将出现未定义。但是，我已经非常仔细地检查并重新检查了 Angular.io 的文档，但无法得到任何工作。

LoginComponent.ts

import  Component, OnInit  from '@angular/core';
import  UserService  from '../../../services/user.service';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
)
export class LoginComponent implements OnInit 

  constructor(private userService: UserService) 
    console.log('userService', userService);
  

  ngOnInit() 

  handleSubmit(data) 
    // https://api-test.sarahlawrence.edu:82/
    this.userService.login(data)
      .subscribe(user => console.log('user', user));
  

user.service.ts

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';
import  Observable, of  from 'rxjs/index';
import  catchError, map, tap  from 'rxjs/internal/operators';

const httpOptions = 
  headers: new HttpHeaders( 'Content-Type': 'application/json' )
;

interface CredsInterface 
  username: string;
  password: string;
;

interface LoggedIn 
  token: string;


@Injectable(
  providedIn: 'root'
)
export class UserService 

  private apiUrl = '<apiUrl>';

  constructor(
    private http: HttpClient
  )  

  login (creds: CredsInterface): Observable<any> 
    console.log('UserService.login()', creds);

    return this.http.post<any>(`$this.apiUrl/signin`, creds, )
      .pipe(
        tap((loggedIn: LoggedIn) => 
          console.log(`Login: $loggedIn`);
        ),
        catchError(this.handleError('login()', []))
      );
  

  /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T> (operation = 'operation', result?: T) 
    return (error: any): Observable<T> => 

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`$operation failed: $error.message`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    ;
  

我不明白为什么会出现此错误：

所以我注销了服务以查看对象，奇怪的是该方法被放置在原型中：

我不明白，我做错了吗？

【问题讨论】：

你有stackblitz吗？

@mwilson 我刚刚创建了一个用于将东西放入其中的工具：stackblitz.com/edit/angular-service-issues?file=src/app/…

我认为您忘记保存更改了。它显示了缺少模块的一堆错误。可能只是路径问题。

@mwilson 不，因为没有简单的方法将所有文件拉入堆栈闪电战

这可能是问题的一部分。您拥有的代码基本上是入门代码，因此在 stackblitz 中重新创建一个简单示例以查看问题所在可能更容易。从外观上看，似乎设置中有很多错误。值得注意的是，您似乎正在引用 form-login 组件，但没有找到。在同一个组件上，您正试图访问一个名为 onHandleSubmit 的不存在的属性。很可能发生的事情是前缀已更改，并且它正在尝试运行该指令并且找不到它，因此您收到了错误。

【参考方案1】：

你怎么称呼那个handleSubmit 方法？

错误说它无法读取undefined 的login 属性，这意味着this.userService 是undefined。 login 方法在原型内部这一事实是可以的。记住gets are deep and sets are shallow

我认为您调用handleSubmit 时使用了一些技巧，这使得this 引用了您认为的其他对象。

---

我刚刚看到了 stackblitz。您使用 [onHandleSubmit]="handleSubmit" 传递对您的函数的引用，但是当它执行时，this 不再是您的 LoginComponent 了。

将此添加到组件构造函数中

this.handleSubmit = this.handleSubmit.bind(this)

更多详情请看这篇帖子：Angular pass callback function to child component as @Input

【讨论】：

你是对的，我基本上有一个登录视图和一个登录表单，这样我就可以在其他地方重复使用登录表单。添加.bind(this) 解决了我的问题！非常感谢，我已经习惯了我可以做的 reactjs：onHandleSubmit=() => handleSubmit() 它允许您所说的正确范围。感谢您的帮助！！！！