Angular 2 component global variable is undefined? - debugging

Question

Im trying to create an if statement within a template to display a certain block of text when an array length is < 1.
This is how I try to do it:
<div *ngIf="socialNetworks.length > 1">
<div class="alert-box warning radius">You can still connect some accounts</div>
<button class="btn btn-primary" *ngFor="let network of socialNetworks" (click)="loginSocialNetwork(network)">
{{network.title}}
</button>
</div>
But I always get an error saying that it cannot read property length of undefined.
I define the variable socialNetworks[] here in an Angular 2 component:
export class MyAccountComponent implements OnInit {
socialNetworks: socialNetwork[];
campaigns: Campaign[];
showGreeting: boolean = true;
constructor(
private _dataservice: DataService) {
}
Then, in a seperate method, I set the value from a response from a pyramid view here:
getSocialNetworks() {
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => this.socialNetworks = res,
err => this.logError(err)
)
}
Even if I add a console.log statement at the end here to see the value of this.socialNetworks, it says it is undefined. But in a debugger I can see that the value of this.socialNetworks is not undefined.
So my question is, am I just referencing the global variable incorrectly, or am I missing/misunderstanding something all together?

Answer 1

Looks to me like socialNetworks isn't set as an empty array on construction, so it will be undefined on init. Try to change the top socialNetwork to:
socialNetworks: socialNetwork[] = [];
The issue we were speaking about below in the comments is most likely to do with this within the subscribe method. It is assigning it to the incorrect scope.
try below:
getSocialNetworks() {
var _that = this;
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => _that.socialNetworks = res,
err => _that.logError(err)
)
}

Answer 2

If the api call uses some external library it might not be hooked into angular 2's digest cycle (Facebook SDK isn't for example). You can debug using Augury, or for simplicity set a global window property in your constructor to access your component:
constructor(private _dataservice: DataService) {
window['MAC'] = this;
}
Then you can check in the dev tools of your browser to see if the socialNetworks array is actually being set:
MAC.socialNetworks
You can always in your HTML use some quick code to show it as JSON to debug what is going on:
{{socialNetworks | json}}
If the page doesn't show it having a value but you see it in the console, then your _dataService isn't triggering change detection and you have to do it manually. You can use ApplicationRef by injecting it in your constructor and calling tick() on it after you set your data.
constructor(
private _dataservice: DataService,
private _appref: ApplicationRef ) {
}
getSocialNetworks() {
var _that = this;
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => {
_that.socialNetworks = res;
this._appref.tick(); // force change detection
}, err => _that.logError(err)
)
}
As for the calling length on undefined, since you're asynchronously pulling data your socialNetworks property is undefined to start. You can initialize it to an empty array like in the answer by #JacobS or modify your check to account for it:
<div *ngIf="socialNetworks && socialNetworks.length > 1">