angular - Ehdollinen syöte nimen attribuutin kanssa johtaa undefined-arvoon

Yritän lisätä ehdon päättääkseni, pitäisikö minun näyttää/piilottaa mybutton, mutta saan jatkuvasti konsolivirheen, että mybutton on määrittelemätön, kun se arvioi mybutton.disabled

Joten testatakseni lisäsin toden lausunnon, että 1===1, mutta se silti antaa saman virheen.

Miksi se tekee niin? Mikä on vähiten työläs tapa refaktoroida tämä, jotta voin lisätä ehdon tähän?

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

}

Vastaus #1

Alla oleva lohko renderöidään ennen painikeloakoa, ja mybutton on täällä määrittelemätön, koska sitä ei ole vielä määritelty.

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

Ehdotan käyttämään ViewChild()-funktiota ja tuomaan napin komponenttiisi:

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

Ja tarkista, onko painike olemassa ennen kuin teet siihen muutoksia:

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

Vaihtoehto olisi käyttää [hidden] *ngIf:n sijaan.