angular - 带有 name 属性结果为 undefined 的条件输入

Question

我正在尝试添加一个条件来决定是否应该显示/隐藏 mybutton ，但在计算 mybutton.disabled 时不断收到控制台错误，即 mybutton 未定义

所以，为了测试，我添加了一个真实的陈述 1===1但仍然抛出相同的错误。

为什么这样做？重构这个最少的方法是什么，所以我可以在这里添加一个条件？

<div [ngSwitch]="item.id">
    <ng-template [ngSwitchCase]="id1">
        <pv-my-selector (onSaveShow)="onSaveShow(mybutton, $event)"></pv-my-selector>
    </ng-template>
</div>
<button *ngIf="1===1" #mybutton mat-button (click)="saveClick(item.id)">Save</button>

onSaveShow(mybutton: any, show: boolean) {
    mybutton.disabled = !show; <!-- error is here -->
}

saveClick(id: string) {

}

Answer 1

下面的块在按钮块和 mybutton 之前呈现此处未定义，因为它还没有定义。

<div [ngSwitch]="item.id">
    <ng-template [ngSwitchCase]="id1">
        <pv-my-selector (onSaveShow)="onSaveShow(mybutton, $event)"></pv-my-selector>
    </ng-template>
</div>

我建议使用 ViewChild()并将按钮导入您的组件:

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

并在对其进行更改之前检查该按钮是否存在:

onSaveShow(show: boolean) {
    if (this.mybutton) {
      this.mybutton.disabled = !show;
    }
}

另一种方法是使用 [hidden]而不是 *ngIf .