TypeError: Cannot read property 'message' of null angular 8 http post

Question

正如我在 Whosebug 中搜索的那样，一个类似的问题也浮出水面，这是我的

登录 OTP 组件：

    onSubmitValidOTP() {        
      this.authenticationService.ValidOTP(this.fo.OtpControl.value, username, role)
        .pipe(first())
        .subscribe(
          data => {
            console.log(data);            
          },
          error => {
            console.log(error);            
          });
  }

授权验证服务：

ValidOTP(OTP, UserName, type) {    
    return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
      .pipe(map(bool => {        
        return bool;
      }));
  }

职员管理员：

[AllowAnonymous]
        [HttpPost("ValidateOTP")]
        internal IActionResult ValidOTP(string OTP, string UserName, string type)
        {
            bool Result = false;
            if (type == "SuperAdmin")
            {
                Users _Users = _Context.Users.FirstOrDefault(j => j.Username == UserName);
                if (_Users != null)
                {
                    
                }
            }
            else
            {
                Staff _Staff = _Context.Staffs.FirstOrDefault(j => j.Username == UserName);
                if (_Staff != null)
                {
                    
                }
            }
            return Ok(new { Result = Result });
        }

这是我在 chrome 开发者控制台.
上显示的错误

更新：
下面是我的login.ts

import { AlertService, AuthenticationService } from '../_services';
import { first } from 'rxjs/operators';
@Component({
  templateUrl: './login.html'
})

export class LoginComponent implements OnInit {      
  returnUrl: string;
  constructor(private Router: Router,        
    private route: ActivatedRoute,
    private router: Router,
    private authenticationService: AuthenticationService,    
  ) {
    this.pageSettings.pageEmpty = true;
    if (this.authenticationService.currentUserValue) {
      this.router.navigate(['/']);
    }
  }    

  get f() { return this.loginForm.controls; }  
  onSubmit() {
    this.authenticationService.login(this.f.LoginUserNameControl.value, this.f.PasswordUserNameControl.value)
      .pipe(first())
      .subscribe(
        data => {
          if (data.validIp) {
            this.router.navigate([this.returnUrl]);
          }
          else {
            this.FormSubmitBool = false;
            this.VerifyOTP = true;
          }
        },
        error => {
          console.log(error);
          this.alertService.error(error);
          this.loading = false;
        });
  }    

  ValidOTP(OTP, UserName, type) {    
    return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
      .pipe(map(bool => {        
        return bool;
      }));

它是我拥有的 login.ts 文件，我也对其进行了修剪，以便您可以在某种程度上更好地理解它。

更新二：
下面是我的authentication.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { BehaviorSubject, Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { User } from '../_models';
    
    @Injectable({ providedIn: 'root' })
    export class AuthenticationService {
      private currentUserSubject: BehaviorSubject<User>;  
      public currentUser: Observable<User>;
    
      constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
      }
    
      public get currentUserValue(): User {
        return this.currentUserSubject.value;
      }
    
      login(username, password) {
{ username, password })
`Users/authenticate`, { username, password })
        return this.http.post<any>(`Staff/authenticate`, { username, password })
          .pipe(map(user => {
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
            return user;
          }));
      }
    
      ValidOTP(OTP, UserName, type) {
        return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
          .pipe(map(bool => {        

            return bool;
          }));
      }
    
      logout() {
        // remove user from local storage and set current user to null
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
      }
    }

更新 3：
这是再次显示 console.log 错误的更新。

onSubmitValidOTP() {        
    let IsUpdated = this.authenticationService.ValidOTP(this.fo.OtpControl.value, JSON.parse(localStorage.getItem('currentUser')).username, JSON.parse(localStorage.getItem('currentUser')).role)
    if (IsUpdated) {
      console.log(IsUpdated);
      IsUpdated
        .pipe(first())
        .subscribe(
          data => {
            console.log(data);            
          },
          error => {
            console.log(error);            
          });

    }
    else {
      this.InvalidOtp = false;
    }
  }

Answer 1

我想你在 angular 和 web api 中使用了不同的项目，所以我看到你已经使用了。

[AllowAnonymous]
[HttpPost("ValidateOTP")]
internal IActionResult ValidOTP(string OTP, string UserName, string type)

请将 internal 更改为 public，因为您上面显示的错误是 404 message for zone.js.

TypeError: Cannot read property 'message' of null angular 8 http post

TypeError: Cannot read property 'message' of null angular 8 http post

rxjs

typescript

asp.net-core

angular

angular8