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

Posted 2023-05-08

【中文标题】当我绑定到数组时，它似乎没有正确反映到标记 ngif

【英文标题】：When i bind to a array, it doesnt seem to properly reflect to the markup ngif

【发布时间】：2019-11-22 12:56:58

【问题描述】：

我有一个@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本身的问题，但似乎当我正确设置按钮时，它仍然认为它是空的，即使当我将它与控制台一起使用时，它也显示了一个数组一号。

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

【参考方案1】：

我认为问题与输入无关。它是从这一行引起的

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

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

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

【讨论】：

有趣。我将静态设置为 false，现在将显示菜单，但按钮数组在 ngForLoop 中仍显示为空

可能是因为jqxMenu是怎么实现的。当您将 handleContext() 正文放在 setTimeout 中时会发生什么，例如 this

setTimeout 不起作用，但看起来我正在使用新版本的 jqxMenu 阅读旧 API。当我删除 [height]="'auto'" 时，它看起来会正确显示菜单。