访问多个孩子返回未定义

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模板的一部分（不完整）。这是打字稿：

@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')"