Angular Элемент массива не определен, но он все еще работает?

Question

По какой-то причине, когда я перебираю массив, результаты становятся неопределенными. Массив является результатом запроса FIRESTORE, который передается в функцию. Я понятия не имею, что может быть причиной такого поведения.

Вот некоторые фрагменты кода, я пропустил некоторые ненужные детали.

HTML (просто отображение колод с помощью ngFor)

<ion-col *ngFor="let deck of decks" class="ion-text-center">
   <ion-label>{{ deck.title }}</ion-label>
   <ion-row *ngIf="currentDeck">
       <app-card-toggle *ngFor="let card of deck.cards" [isInCurrentDeck]="isInDeck(card, currentDeck)"
           [cardData]="card" (toggleEvent)="modifyDeck($event)">
       </app-card-toggle>
   </ion-row>
</ion-col>

TS (функция, которая вызывает у меня проблемы)

partitionDecks(decks: Deck[]) {
    console.log(decks);
    console.log(decks[0]);
    ...

Результат console.log (колоды). Это желаемое поведение

Результат console.log (деки [0])

Где вызывается функция

Почему первый элемент не определен?

• Использование оператора JavaScript не работает. В результате получается пустой массив.
• Простое "для" l oop даже не распознает элементы массива
• "деки" можно использовать в HTML, пока ею не манипулируют .... ПОЧЕМУ ???