Question

user.js

router.post('/register', (req, res) => {
let newUser = new User({
    name: req.body.name,
    email: req.body.email,
    username: req.body.username,
    password: req.body.password
});

User.addUser(newUser, (err, user) => {
    if (err) {
        res.json({ "success": false, msg: 'Failed to register User' })
    } else {
        res.json({ "success": true, msg: "User Added" })
    }
})
});

authservice.ts

import { catchError,map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders,HttpErrorResponse} from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class AuthService {

  constructor(private http:HttpClient) { }

  registerUser(user){
    let headers = new HttpHeaders();
    headers.append('content-type','application/json');

return this.http.post('http://localhost:8080/users/register',user, 
        {headers:headers})
  }
 }

register.component.ts

import { ValidateService } from './../../services/validate.service';
import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import {AuthService} from '../../services/auth/auth.service';
import {Router } from '@angular/router';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  name:String;
  username:String;
  email:String;
  password:String;

  constructor(private _validate:ValidateService,
    private _flashMessagesService: FlashMessagesService,
    private _authservice:AuthService,
    private _router:Router) { }

  ngOnInit() {
  }

  onRegisterSubmit(){
const user={
  name:this.name,
  username:this.username,
  email:this.email,
  password:this.password,
}
this._authservice.registerUser(user)
  .subscribe(data =>{
    console.log(data);
    **if(data.success){**
      this._flashMessagesService.show('Registration Succesfull ! ',{cssClass:'alert-success',timeout:3000})
      this._router.navigate(['/login']);
    }else{
      this._flashMessagesService.show('Oops Something went wrong! ',{cssClass:'alert-danger',timeout:3000})
      this._router.navigate(['/register'])
    }
  })
 }
}

错误

src / app / components / register / register.component.ts（49,17）中的错误：错误TS2339：“对象”类型上不存在属性“成功”。

数据提交成功，甚至角度也成功重定向到下一个组件，但这给出了错误。在 register.component.ts 中，同时在if语句 if（data.success）

中预订返回对象的属性成功

Answer 1

您可以在响应中使用类型检查，以避免此类错误。

创建一个RegisterResponse类，它将包含HTTP响应的结构。

export class RegisterResponse {
  public success: boolean;
  public msg: string;
}

然后将其作为通用参数传递给您的http.post()方法：

import { RegisterResponse } from './RegisterResponse'; // Or wherever it is..

export class AuthService {

  constructor(private http:HttpClient) { }

  registerUser(user){
    let headers = new HttpHeaders();
    headers.append('content-type','application/json');

    return this.http.post<RegisterResponse>('http://localhost:8080/users/register', user, {headers:headers});
  }
}

registerUser()方法将为您返回Observable<RegisterResponse>类型，因此，当您订阅它时，data变量将为RegisterResponse类型。但是您也可以根据需要指定类型：

this._authservice.registerUser(user)
  .subscribe((data: RegisterResponse) => {
    if (data.success) {
      // ...
    }
    else {
      // ...
    }
  });

希望有帮助。

Answer 2

您可以使用以下代码：

dataRegister:any={}

//Function register
this._authservice.registerUser(user)
  .subscribe(data =>{
    
    this.dataRegister = data;
    if(this.dataRegister.success){
      //
    }
    else{
      //
    }
  
 }

属性“成功”在类型“对象”上不存在

2 个答案: