When i bind to a array, it doesnt seem to properly reflect to the markup ngif

Question

I have an @Input which I assign a value in the parent component. I assign the value from an empty array to a array of size one.

In this component though, it doesnt seem to properly reflect this changed array in the form of an NGIF. It is pretty simple, and I didnt think I needed to use setters as it is taking the object as is etc.

Below is the explicit code I am using for the implementation

Parent Item A Markup

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

Parent Item A Code:

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

Component input-datalist Markup:

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

Component input-datalist Code:

@Input() buttons: any[]

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

When I do this, right clicking will call the context menu, but it will say: open does not exist for gridMenu. I took off the ngIf, to see if the issue is with the MENU itself, but it seems that when I set the buttons properly, it still thinks it is empty, even though when I bring it with the console, it shows an array of size one.

Is there something I am missing when it comes to setting the property? It follows every other implementation I have seen.

score 1 · Accepted Answer · answered Jul 12 '19 at 18:49

1

i think the problem has nothing to do with inputs. it causes from this line

@ViewChild('gridMenu', { read: null, static: true }) gridMenu: jqxMenuComponent;

here static: true causes ViewChild query not to wait for *ngIf evaluated. in other words static: true causes ViewChild to execute before *ngIf is evaluated ( details here more details here ). So changing as follows should fix your problem.

@ViewChild('gridMenu', { static: false }) gridMenu: jqxMenuComponent;

answered Jul 12 '19 at 18:49

ysf

4,634
3
27
29

Interesting. I set static to false and the menu will now show, but the buttons array is still showing empty in the ngForLoop – Fallenreaper Jul 12 '19 at 18:54
it may be because how `jqxMenu` is implemented. what happens when you place `handleContext()` body in a `setTimeout` like [this](https://www.codepile.net/pile/B2g5g1OE) – ysf Jul 12 '19 at 19:04
setTimeout doesnt work, but it looks like i was working reading the old API with a new version of jqxMenu. When I remove the [height]="'auto'", it looks like it will show the menu correctly. – Fallenreaper Jul 12 '19 at 19:18

When i bind to a array, it doesnt seem to properly reflect to the markup ngif

1 Answers1