当我绑定到一个数组时，它似乎没有正确反映到标记 ngif

Question

我有一个 @Input，我在父组件中为其赋值。我将一个空数组的值分配给一个大小为 1 的数组。

虽然在这个组件中，它似乎没有以 NGIF 的形式正确反映这个改变的数组。这非常简单，我认为我不需要使用 setter，因为它按原样获取对象等。

下面是我用于实现的显式代码

父项 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.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()
}

当我执行此操作时，右键单击将调用上下文菜单，但它会说：gridMenu 不存在打开。我取下了 ngIf，看看问题是否出在 MENU 本身，但似乎当我正确设置按钮时，它仍然认为它是空的，即使当我把它带到控制台时，它显示了一系列一号。

在设置属性时我是否遗漏了什么？它遵循我所见过的所有其他实现。

Answer 1

我认为问题与输入无关。它是由这条线引起的

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

此处 static: true 导致 ViewChild 查询不等待 *ngIf 评估。换句话说，static: true 导致 ViewChild 在评估 *ngIf 之前执行（ details here more details here ）。所以如下更改应该可以解决您的问题。

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

当我绑定到一个数组时，它似乎没有正确反映到标记 ngif

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

jqxwidgets

angular-directive

angular