在 ngOnInit 范围内初始化属性答案

【问题标题】：Initializing properties inside ngOnInit scope在 ngOnInit 范围内初始化属性
【发布时间】：2019-10-14 04:51:52
【问题描述】：

我正在使用 ngOnInit 来从 Loopback API 调用中获得响应。我在这个范围内初始化的属性不能在订阅范围外使用。我知道这是一个简单的答案，但我只是没有看到它

private siteData: Kiosk;

  constructor(private dataService: DataService){} 

 ngOnInit(){
    this.dataService.getDataByID(this.dataService.getSiteID())
        .subscribe((data:Site) => { 
             this.siteData = data;
             console.log(this.siteData); // This outputs correctly 
    });
    console.log(this.siteData); // This is undefined
  }

  site: any[] = [{
    title: this.siteData.title, // this is undefined and throws error
  }];

我希望输出不是未定义的，而是响应中的数据

【问题讨论】：

在订阅范围内使用即可，无需外泄。

标签： javascript angular typescript ngoninit

【解决方案1】：

这是因为 observables 是异步的。 sideData 直到在 subscribe 调用中进行分配之后才被定义——它类似于一个承诺。

如果您在调用.then 之前尝试访问由promise 设置的值，那么它也将是未定义的。解决这个问题的方法是使用tap 运算符将其设置在管道中，然后在订阅中以其他方式对其进行操作。或者，您可以使用类似 ngrx 的东西，它会自动更新为最新值。

【讨论】：

稍微吹毛求疵，可观察对象并不是固有地异步的。 of("foo").subscribe(console.log) 将在执行下一行之前记录。

【解决方案2】：

console.log(this.siteData); // This is undefined

因为如果您不希望它未定义，这不会等待 this.dataService.getDataByID 完成使用里面的那个

【讨论】：

【解决方案3】：

您需要使用您已经在执行的值初始化 subscribe 方法中的变量。

现在，一旦请求完成，您就可以在 HTML 中访问它们。确保在 HTML 中添加检查，即如果 siteData 使用 *ngIf & 然后正常使用这些变量

【讨论】：

【解决方案4】：

只有当你得到这样的数据时才填写你的字段：

private siteData: Kiosk;
site: any[];

  constructor(private dataService: DataService){} 

 ngOnInit(){
    this.dataService.getDataByID(this.dataService.getSiteID())
        .subscribe((data:Site) => { 
             this.siteData = data;
             site = [{title: data.title}];
    });
  }

【讨论】：

【解决方案5】：

我还想指出你要更好地理解 Angular 中的生命周期钩子。您正在像这样设置您的类属性：

site: any[] = [{
    title: this.siteData.title, // this is undefined and throws error
  }];

这意味着，您正在访问this.sideData，它仅在组件初始化（构造）后实际运行的 ngOnInit 挂钩中设置。此外，您只是在生命周期钩子 (OnInit) 中订阅 Observable，也就是说，您还没有主动分配结果，只有在 observable 发出结果之后。您的 observable 不必是异步的，但在您的情况下很可能是异步的。

简短的故事：您遇到了错误，因为您试图访问对象 this.siteData 的属性，即在那个时间点未定义。

【讨论】：