Question

我在组件onload之间传递数据。当组件在订阅函数中接收信息时，它能够使用数据并对其执行任何操作，因此console.log工作正常，因此它显然正在接收它，但是在订阅函数之外，信息是无法访问的，并且未定义。所以我无法运行console.log或对信息做任何事情。在html中，它表示它也是未定义的。

组件。

import { Observable } from 'rxjs/Rx';
import { User } from '../User';
import { AccountInfo } from './../AccountInfo';
import { LoginService } from './../login.service';
import { Component, OnInit, AfterViewInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, AfterViewInit {

public user: User;
public subscription: Subscription;

  constructor(route: ActivatedRoute, private loginService: LoginService) {}

  ngOnInit() {
    this.loginService.getMessage().subscribe(data =>
    {
      this.user = data;
      console.log(this.user.vendorname);
     });

    console.log(this.user.vendorname);

  }

  ngAfterViewInit() {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    }  

  }

html的相关部分

<h1>Welcome {{user.vendorname}}</h1>

Answer 1

是..这就是async功能的工作方式。你传递给subscribe函数的东西是另一个函数。

data => {
  this.user = data;
  console.log(this.user.vendorname);
}

一旦getMessage()收到服务器的回复，就会调用此方法。将立即调用subscribe之后的任何语句，这就是当您尝试将this.user.vendorname记录在那里时仍然未定义的原因。

如果您在html收到错误，则应使用安全导航操作员（?.）：

<h1>Welcome {{user?.vendorname}}</h1>

订阅功能以外无法访问的数据

1 个答案: