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不存在open。我摘下了ngIf，看问题是否出在MENU本身上，但似乎当我正确设置按钮时，它仍然认为它是空的，即使当我将其与控制台一起使用时，它也显示了一个数组。大小一。

设置属性时，我是否缺少某些东西？它遵循我见过的所有其他实现。

Answer 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;

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

1 个答案: