Угловая 2-компонентная глобальная переменная не определена?

Question

Im пытается создать если заявление в шаблоне для отображения определенного блока текста, когда длина массива < 1.

Это, как я пытаюсь сделать это:

<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>

Но я всегда получаю сообщение о том, что он не может прочитать длину свойства неопределенного.

я определить переменную socialNetworks [] здесь в угловом 2 компонента:

export class MyAccountComponent implements OnInit { 
    socialNetworks: socialNetwork[]; 
    campaigns: Campaign[]; 
    showGreeting: boolean = true; 

constructor(
    private _dataservice: DataService) { 
} 

Затем в отдельном методе, я установить значение от ответа от зрения пирамиды здесь:

getSocialNetworks() { 
    var url: string; 
    url = "/account_api" 
    this._dataservice.getDataByUrl(url) 
     .subscribe(
     res => this.socialNetworks = res, 
     err => this.logError(err) 
    ) 
    } 

Даже если я добавлю инструкцию console.log в конце здесь, чтобы увидеть значение this.socialNetworks, он говорит, что он не определен. Но в отладчике я вижу, что значение this.socialNetworks не определено.

Итак, мой вопрос: я просто неправильно ссылаюсь на глобальную переменную, или я не вижу/не понимаю что-то вместе?

Answer 1

Похоже, что socialNetworks не задан как пустой массив при построении, поэтому он будет не определен в init. Попробуйте изменить верхний SocialNetwork на:

socialNetworks: socialNetwork[] = []; 

Вопрос, который мы говорили о ниже в комментариях, скорее всего, связано с this в рамках метода подписки. Он присваивает его неправильной области. попробовать ниже:

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

Если вызов API использует некоторые внешние библиотеки не может быть подключен в переваривать цикл угловых 2'S (Facebook SDK не для примера). Вы можете отлаживать с помощью Augury, или для простоты установить глобальное свойство окна в конструкторе, чтобы получить доступ к компоненту:

constructor(private _dataservice: DataService) { 
    window['MAC'] = this; 
} 

Затем вы можете проверить в Дев инструментов браузера, чтобы увидеть, если socialNetworks массив фактически установлен :

MAC.socialNetworks 

Вы можете всегда в вашем HTML использовать некоторые быстрый код, чтобы показать, как JSON для отладки, что происходит:

{{socialNetworks | json}} 

Если страница не показывает, что она имеет значение, но вы видите ее на консоли, то ваш _dataService не запускает обнаружение изменений, и вам нужно сделать это вручную. Вы можете использовать ApplicationRef, введя его в свой конструктор и вызывая tick() после того, как вы установили свои данные.

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

Что касается calling length on undefined, так как вы асинхронно вытягивать данные вашей собственности socialNetworks неопределен, чтобы начать.Вы можете инициализировать его в пустой массив, как в ответ на @JacobS или изменить свой чек на счет для него:

<div *ngIf="socialNetworks && socialNetworks.length > 1">