如何在 FrontEnd TypeScript (MEAN Stack) 中使用后端对象

Question

使用 MongoDB、express.js、angular4、node.js

我检索到的字符串很好检索，但与完整对象不一样...

account.service.ts（已满，）

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
const jwtDecode = require('jwt-decode');

import { User } from '../../models/user.model';
import { AuthService } from './auth.service';


@Injectable()
export class AccountService {
  constructor(private http: HttpClient,
              private authService: AuthService) {}

  user: any[];

  currentUser() {
    if(this.authService.isAuthenticated()){
      const token = localStorage.getItem('token');
      const decoded = jwtDecode(token);
      return decoded.user;
    }
  };

 getProfile() {
const id = this.currentUser();
return this.http.get("http://localhost:3000/user/" + id).
  map(
  (response: Response) => {
    const data = response.json();
    return data;
  }
)
  .catch(
    (error: Response) => {
      console.log(error);
      return Observable.throw(error.json());
    }
  )
}

用户-profile.component.ts

export class UserProfileComponent implements OnInit {
  id: string;
  user: any;

  constructor(private account: AccountService) {}

  ngOnInit() {
    this.id = this.account.currentUser();
    this.user = this.account.getProfile()
      .subscribe(user => {
              this.user = user;
              return this.user;
            });
  }

  logUser() {
    console.log(this.id);
    console.log(this.user);
  }
}

用户-profile.component.html

  <p>{{user}}</p>
  <p>User with ID {{id}} Loaded</p>
  <a (click)="logUser()">Log User Test</a>

HTML 文件显示：

[object Object]

User with ID 59ca916323aae527b8ec7fa2 Loaded

点击 "log User" link 得到的是检索到的 ID 字符串和用户对象：

59ca916323aae527b8ec7fa2 [{...}] //clicking this reveals all of the object's details.

但我无法完成获取这些详细信息并将其显示在 HTML 中的步骤，因为我已成功使用 ID 管理...我的意思是，{{user.anything}} 没有'按应有的方式获取用户数据

我可以帮忙吗？

Answer 1

将您的 getProfile() 更改为

getProfile() {
    const id = this.currentUser();
    return this.http.get("http://localhost:3000/user/" + id).
      map(
      (response) => response.json()
    )
      .catch(
        (error: Response) => {
          console.log(error);
          return Observable.throw(error.json());
        }
      )
    }

此外，在 ngOnInit() 中改变这个，

this.user = this.account.getProfile()
      .subscribe((user) => {
              this.user = user;
            });

看看它是否给你正确的输出。

编辑

改这个，

this.user = this.account.getProfile()
          .subscribe((user) => {
                  this.user = JSON.parse(JSON.stringify(user));
                });

EDIT-2

this.user = this.account.getProfile()
              .subscribe((user) => {
                      this.user = JSON.stringify(user);
                      this.userObj = JSON.parse(JSON.stringify(user));
                      // also try, this.userObj = user; if above line didn't work
                    });

将组件中的另一个属性定义为 ,

userObj: any;

将模板中的对象引用为this

{{ userObj[0]?.email }}

如何在 FrontEnd TypeScript (MEAN Stack) 中使用后端对象

How to use Backend Object in FrontEnd TypeScript (MEAN Stack)

http

node.js

typescript

mean-stack

angular