Question

我正在使用ngOnInit来从回送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
  }];

我希望输出不会是不确定的，并且是响应中的数据

Answer 1

这是因为可观察对象是异步的。直到在subscribe调用中进行分配后，sideData才定义-它类似于promise。

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

Answer 2

我还想指出您对Angular中的生命周期挂钩有更好的了解。您正在这样设置类属性：

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

这意味着您正在访问this.sideData，它仅在初始化（构造）组件后实际运行的ngOnInit挂钩中设置。此外，您仅在生命周期挂钩（OnInit）中订阅了Observable，即您仅在Observable发出结果之后才主动分配结果。您的可观察对象不一定必须是异步的，但就您而言，很可能是异步的。

短故事：由于尝试访问对象this.siteData的属性（此时未定义），您会遇到错误。

Answer 3

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

因为如果您不希望this.dataService.getDataByID处于不确定状态，它不会等待Error: EPERM: operation not permitted, mkdir 'C:\Users\Yasiru' TypeError: Cannot read property 'loaded' of undefined at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27) at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3) at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:77:20 at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:225:22) at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24 at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7 at Array.forEach (<anonymous>) at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13 at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25) at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20) C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98 var doExit = npm.config.loaded ? npm.config.get('_exit') : true ^ TypeError: Cannot read property 'loaded' of undefined at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27) at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3) at process.emit (events.js:196:13) at process._fatalException (internal/process/execution.js:142:25) Install for [ 'create@latest' ] failed with code 7完成使用

Answer 4

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

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

Answer 5

仅当您获得如下数据时才填写字段：

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}];
    });
  }

初始化ngOnInit范围内的属性

5 个答案: