Native Element toArray() undefined - html

Question

I'm doing some refactoring on a application that I'm working on and I'm stuck.
On my HTML I have a grid with some cards using ngFor. There is a button that should "show/hide" a specific div.
My solution was to use a local variable to get the specific element and show that specific div. It was working fine, but now, I can't get it to work, I get this error:
ERROR TypeError: "this.travelInfoBox.toArray(...)[index] is undefined"
showBox card.component.ts:40
View_CardComponent_0 CardComponent.html:12
Here is the HTML for the parent component:
<div class="row">
<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
<app-card [student]="student" [i]="i"></app-card>
</div>
</div>
Here is the HTML for the card component:
<div class="col s12 m4 l2 right">
<hr class="hide-on-med-and-up">
<i class="material-icons">send</i>
<i class="material-icons" (click)="showBox(i)">access_alarm</i>
<span class="hide-on-med-and-up card-travel-info">Tavel Information</span>
<app-travel-info class="card travel-info s12 m6 l4" #travelInfoBox></app-travel-info>
<hr class="hide-on-med-and-up">
</div>
TS for the card component:
import {Component, Input, ViewChildren, QueryList, ElementRef, AfterViewInit } from '#angular/core';
#Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss']
})
export class CardComponent {
#Input('student') student: any;
#Input('i') i: any;
#ViewChildren('travelInfoBox') private travelInfoBox: QueryList<ElementRef>;
constructor() { }
showBox(index) {
const nativeElement = this.travelInfoBox.toArray()[index].nativeElement;
nativeElement.style.display = nativeElement.style.display === 'none' || !nativeElement.style.display ? 'block' : 'none';
}
}