Я пытаюсь реализовать компонент выбора материала angular в AG-GRID в соответствии с описанным здесь примером
Однако, когда я нажимаю на ячейку, которая должна сделать выбор появляется, он не появляется, и в консоли появляется следующая ошибка:
core.js:4002 ERROR TypeError: Cannot read property 'element' of undefined
at mat-select.component.ts:37
Это соответствует следующему методу в MatSelectComponent:
// dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
ngAfterViewInit() {
window.setTimeout(() => {
this.group.element.nativeElement.focus();
});
this.selectFavouriteVegetableBasedOnSelectedIndex();
}
Этот компонент был точно скопирован из приведенный пример, за исключением того, что я помещаю шаблон и стили в их собственные файлы HTML / S CSS соответственно.
@Component({
selector: 'radio-cell',
template: './mat-select.component.html'
styles: ['./mat-slect.component.scss']
})
Однако, когда я включаю шаблон HTML в компонент, как в примере это работает!
@Component({
selector: 'radio-cell',
template: `
<mat-card>
<div class="container" #group tabindex="0" (keydown)="onKeyDown($event)">
<mat-form-field>
<mat-select panelClass="ag-custom-component-popup" [(ngModel)]="favouriteVegetable">
<mat-option *ngFor="let vegetable of vegetables" [value]="vegetable">
{{ vegetable }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card>
`,
styles: ['./mat-slect.component.scss']
})
Есть ли какое-либо объяснение этого поведения или способ помещения всего этого HTML в компонент?
EDIT 1: Компонент включает ссылочная переменная шаблона 'group' в компоненте, как показано ниже, поэтому должна ли она быть недоступна для метода ngAfterViewInit ()?
@ViewChild("group", { read: ViewContainerRef, static: true })
public group;