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

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

Однако в этом компоненте он, похоже, не отражает должным образом этот измененный массив в форме NGIF. Это довольно просто, и я не думал, что мне нужно использовать сеттеры, поскольку он принимает объект как есть и т. д.

Ниже приведен явный код, который я использую для реализации

Разметка родительского элемента A

<input-datalist [buttons] = "buttons"></input-datalist>

Код родительского элемента A:

buttons: any[];
ngOnInit() { this.buttons = [ {key: "value"} ];

Компонент список входных данных Разметка:

<jqxGrid (contextMenu) = "handleContext($event)"></jqxGrid>
<jqxMenu *ngIf = "buttons && buttons.length > 0">
  <ul>
    <li *ngFor = "let btn of buttons">{{btn.key}}</li>
  </ul>
</jqxMenu>

Компонент список входных данных Код:

@Input() buttons: any[]

@ViewChild('gridMenu', { read: null, static: true }) gridMenu: jqxMenuComponent;
handleContext(event){
    let scrollTop = window.scrollY;
    let scrollLeft = window.scrollX;
    console.info("Does GridMenu Exist? ", this.gridMenu, 'Button Count: ', this.buttons)
    this.gridMenu.open(parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    event.preventDefaults()
}

Когда я это сделаю, щелчок правой кнопкой мыши вызовет контекстное меню, но в нем будет сказано: open не существует для gridMenu. Я снял ngIf, чтобы посмотреть, не в самом ли вопросе МЕНЮ, но кажется, что когда я правильно устанавливаю кнопки, он все равно думает, что он пустой, хотя, когда я подношу его с помощью консоли, он показывает массив размер один.

Есть ли что-то, что мне не хватает, когда дело доходит до настройки свойства? Это следует за любой другой реализацией, которую я видел.