开发者问题收集

Angular - 订阅返回中未定义的值

2021-01-22
421

我正在开发一个表单,我将从 webapi 获取值并显示给用户。好的。所有部分操作系统从 webapi 获取数据都是可以的。订阅返回正确的 Json,没有问题

这是 angular 程序:

import { Component, Input, ViewChild, OnInit } from '@angular/core';

import { ErrorMsgComponent } from '../../shared/error-msg/error-msg.component';

import { UserallService } from 'src/app/services/userall.service';
import { Router } from '@angular/router';
import { UserAll } from '../../interfaces/userall';

import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-userdet',
  templateUrl: './userdet.component.html',
  styleUrls: ['./userdet.component.css']
})
export class UserdetComponent implements OnInit {
  @Input() userall: UserAll =  {} as UserAll;
  @ViewChild(ErrorMsgComponent) errorMsgComponent: ErrorMsgComponent;
  @ViewChild('f', {static: false}) myForm: NgForm;

  public isDisabled = true;
  public btnName = 'Alterar dados';
  private userallOld = this.userall;

  constructor(private userAllService: UserallService, private router: Router) {
  }

  ngOnInit(): void {
    this.getUserData();
  }

  public editarForm(): void {
    this.isDisabled = !this.isDisabled;

    if (this.isDisabled) {
      this.userall = this.userallOld;
      this.btnName = 'Alterar dados';
    }
    else {
      this.btnName = 'Cancelar';
    }
  }

  onSubmit(): void {
    this.modUserAll(this.userall);
  }

  modUserAll(userall: UserAll): void {
    this.userAllService.modUserAll(userall)
      .subscribe(
      () => {
        this.errorMsgComponent.setOk('Usuário alterado com Sucesso');
        this.myForm.resetForm();
      },
      error => {
        console.log(error);
        this.errorMsgComponent.setError('Falha ao alterar usuario.');
      });
  }

  getUserData(): void {
    this.userAllService.getUser(sessionStorage.getItem('currentUserId'))
      .subscribe(
      (result: UserAll) => {
        this.userall = result;
        console.log(result);
        console.log(result.name);
        console.log(sessionStorage.getItem('currentUserId'));
        console.log(this.userall.name);
        this.myForm.name = this.userall.name;
      },
      error => {
        console.log(error);
        this.errorMsgComponent.setError('Falha ao ler dados do usuario.');
      });
  }
}

这是 userall 的实例:

export interface UserAll {
  id: number;
  name: string;
  address1: string;
  address2: string;
  city: string;
  country: string;
  zipCode: string;
  phoneNumber: string;
 }

这是控制台日志的返回结果.. console.log(result);

[{…}]0: address1: "xxxxxxxx" address2: "yyyyyyy" city: "fffffffffff" country: "Brazil" id: 1 name: "sjh fsdkjfh sakjhf " phoneNumber: "+5531969696969" user: null userId: "380de5fe-711a-4b4a-9130-4c86684c38df" zipCode: "6969696969" proto : Objectlength: 1__proto__: Array(0)

    console.log(result.name);

userdet.component.ts:67 undefined

    console.log(sessionStorage.getItem('currentUserId'));

userdet.component.ts:68 380de5fe-711a-4b4a-9130-4c86684c38df

    console.log(this.userall.name);

userdet.component.ts:69 undefined

我很困惑,因为 json 是由订阅返回,但 result.name 未定义。WTH?

1个回答

这似乎是返回对象的数组。尝试 result[0].name

Theresa Tobollik
2021-01-22