在订阅中初始化变量总是未定义的Angular rxjs

Question

我是 angular2 typescript 和 rxjs 和 observables 的新手。

我正在尝试使用此代码从 api 获取信息

let Alertsanswer = this.LogService.getAlertsForClient(this.userId);
    var a = Alertsanswer.subscribe((response) => {
       this.alerts=JSON.parse(response)
console.log(this.alerts) //give the right response.
    },
      error => {
        var err = error;

        alert(err);
      }
    )

正如您在订阅中看到的那样，我初始化了一个私有变量：“this.alerts”

在订阅之外这个变量有未定义的值 console.log(this.alerts) //给出未定义的。

在组件 doom 中使用 this.alert 也是未定义的 这给出了一个错误：

<div>{{alerts}}</div>

第一个问题：为什么“”this.alerts inside subscribe 赋予控制台正确的价值，但外部（包括厄运）总是未定义。

第二个问题：我知道来自服务器的值是异步的，如果我有更多的代码可以传递答案，我将在哪里写它（回调），它会在订阅中吗？ 订阅是什么意思？ 感谢您的帮助

Answer 1

对于您的第一个问题，this.alerts 在 subscribe finish 之后获取正确的值（从 api 获取数据），在完成之前使用 this.alerts 不会给出正确的值。您应该使用<div *ngIf="alerts">{{alerts}}</div> 来确保数据可以使用。例如，在订阅完成之前，使用<div>{{alerts.property}}</div> 将引发错误。 console.log也是同理。

第二个，使用：

this.LogService.getAlertsForClient(this.userId)
.subscribe(response => this.alerts = JSON.parse(response),
()=>console.log('error'),
()=>yourFuncRelayOnTheResponse(this.alerts)); 

Answer 2

嘿，您正在通过将服务分配给变量来做一些奇怪的事情。已经对您的代码进行了一些编辑，以向您展示我将如何定义事物：

export class LoginComponent
{
    private alerts; //This needs to be defined here on the class first

    constructor(public loginService: LoginService)
    {
    }

    ngOnInit()
    {
        this.LogService
            .getAlertsForClient(this.userId)
            .subscribe(response =>
                {
                    this.alerts = JSON.parse(response); // Assign response to class member alerts.
                },
                error=>
                {
                    console.log(error);
                })
    }
}