Angular Mat-Select - openChange возвращает undefined

Question

Я устанавливаю стиль css, используя собственный код, когда пользователь открывает mat-select. Но возвращает неопределенную ошибку. В консоли, когда я печатаю и проверяю значения элементов, я мог видеть панель: undefined. Может кто-нибудь, дайте мне знать, как получить значение панели.

Error: Cannot read property 'nativeElement' of undefined

Html:

<mat-select #select (openedChange)="changeHeight($event,select)">
    <mat-option>1</mat-option>
    <mat-option>2</mat-option>
</mat-select>

component.ts:

import { Component, OnInit, Inject, Renderer2, ElementRef } from '@angular/core';

constructor(private renderer:Renderer2){}

changeHeight(event:any,element:any)
{
    if (event)
    {

      const height = window.innerHeight|| 
                     document.documentElement.clientHeight|| 
                     document.body.clientHeight;

      this.renderer.setStyle(element.panel.nativeElement,
          'max-height',
           (height-10-element.panel.nativeElement.getBoundingClientRect().y)+'px')
     }
}

Answer 1

Добавьте это

import { ViewChild } from "@angular/core";
import { MatSelect } from "@angular/material/select";

и это в свой компонент:

@ViewChild('select') select: MatSelect;

После этого вы можете, если вам это нужно, передать select в качестве параметра или просто удалить параметр и вызовите его напрямую.

Answer 2

установите elementref для элемента вверху конструктора, затем установите то же имя в вашем шаблоне #name с вашим именем elementref.