Доступ к нескольким дочерним элементам возвращает undefined

Question

Я пытаюсь получить доступ к макету, используя @ViewChild, но когда я использую его с QueryList, он возвращает неопределенное значение.

<ng-template let-service="item" backgroundColor="pink">
                    <FlexboxLayout flexDirection="row" backgroundColor="#26252A">
                        <GridLayout class="item"
                                    [id]="service.name"
                                    #grid
                                    rows="*, *, 2*" columns="100, *, 10" 
                                    >

Выше находится часть шаблона html (не полная ofc).И вот машинопись:

@ViewChild('grid') grids: QueryList<ElementRef>;

add(){
   console.log("grid " + this.grids.last.nativeElement.id);
}

Итак, это возвращает: "ERROR TypeError: undefined is not an object (evaluating 'this.grids.last.nativeElement')"