angular - Podmienený vstup s atribútom name vedie k hodnote undefined

Snažím sa pridať podmienku, aby som rozhodol, či mám zobraziť/skryť mybutton, ale stále dostávam chybu v konzole, že mybutton je nedefinované, keď sa vyhodnocuje mybutton.disabled

Takže, aby som otestoval, pridal som pravdivé tvrdenie, že 1===1, ale stále sa zobrazí tá istá chyba.

Prečo to robí? Aký je najjednoduchší spôsob, ako to prepísať, aby som sem mohol pridať podmienku?

<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) {

}

Odpoveď č. 1

Nižšie uvedený blok sa vykreslí pred blokom tlačidla a mybutton je tu nedefinovaný, pretože ešte nie je definovaný.

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

Navrhujem použiť ViewChild() a importovať tlačidlo do vášho komponentu:

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

A skontrolujte, či tlačidlo existuje, predtým než vykonáte zmeny na ňom:

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

Alternatívou by bolo použiť [hidden] namiesto *ngIf.