订阅角度时无法在 ngoninit 中获得价值

Posted 2023-03-13

【中文标题】订阅角度时无法在 ngoninit 中获得价值

【英文标题】：Can't get value in ngoninit on subscribe angular

【发布时间】：2019-06-06 09:28:27

【问题描述】：

我不明白为什么我的对象在 Angular 上的 ngoninit 上总是“未定义”。 我在我的 api 项目上请求我得到正确的回复。 当我console.log 我的对象未定义（ngoninit）但在其他函数中我可以获得值。

我的问题是为什么以及如何在 ngoninit 中获取我的对象。

谢谢

我在邮递员上正确检索了我的回复 其他函数也检索

服务：

getById(id:string):Observable<Grower>
   return this.http.get<Grower>(`$environment.apiUrl/growers/$id`);

查看模型：

export class GrowerDetails 

    adress:string;
    zip:string;
    city:string;

组件：

  growerService:GrowerService;

  detailsProfil: GrowerDetails;

  constructor(private authenticationService: AuthenticationService, growerService:GrowerService,
    private formBuilder:FormBuilder)  
      this.growerService = growerService;
   

  ngOnInit() 
    this.detailsProfil = new GrowerDetails();

    this.growerService.getById(this.decoded.nameid).subscribe(
      (data:Grower) => this.detailsProfil = 
            adress: data.adress,
            city: data.city,
            zip : data.zip

      ,
      error => console.log(error) 
    );
console.log(this.detailsProfil); // undefinned

onSubmit()
    console.log(this.detailsProfil); // ok
 

邮递员：

    "lat": 0,
    "long": 0,
    "description": "test",
    "adress": "test",
    "zip": "test",
    "city": "test"

【问题讨论】：

How do I return the response from an Observable/http/async call in angular2?的可能重复

因为你的订阅是异步的，你可以在订阅里面进行控制台，你会看到数据

我该怎么做？

(data:Grower) => this.detailsProfil = ...; console.log(...);

外部，是的，但是在 observable 回调执行之后。如果您保留两个console.log 语句，您将看到您的原始语句在订阅回调之前被调用。有关详细信息，请参阅重复的问题/答案。

【参考方案1】：

detailsProfil 的值可以在订阅内但不能在订阅外。因为 getById() 是一个 async 调用，所以在执行之前不会等待订阅完成。

进行如下更改，

 constructor(private authenticationService: AuthenticationService, growerService:GrowerService,
    private formBuilder:FormBuilder)  
      //  this.growerService = growerService;  <- this line not required
   

  ngOnInit() 
    this.detailsProfil = new GrowerDetails();

    this.growerService.getById(this.decoded.nameid).subscribe((data) => 
       console.log(data);            
       this.detailsProfil.adress = data.adress;
       this.details.city = data.city;
       this.details.zip = data.zip;
     ,
      error => console.log(error));
     console.log(this.detailsProfil); // you will get detailsProfil Object
  

编码愉快.. :)

【讨论】：

好的，它可以工作。我不知道为什么他们在文档中这样说： .subscribe((data: Config) => this.config = herosUrl: data['heroesUrl'], textfile: data['textfile'] );

【参考方案2】：

未定义，因为您还没有数据。

     ngOnInit() 
        this.detailsProfil = new GrowerDetails();

        this.growerService.getById(this.decoded.nameid).subscribe(
          (data:Grower) => 
             this.detailsProfil = adress: data.adress,city: data.city,zip : data.zip ;

             console.log(this.detailsProfil); // you can access here because you got it now.
          ,
          error => console.log(error) 
        );

    console.log(this.detailsProfil); // you can't access here. it's still undefined