display a input according to the selected value in a drop-down list Angular-CodePudding

I need to show an input once the "maintenance" (manutenção in br) option is selected in the dropdown, what is wrong? I think I'm on the right path but there's something that's not right...

html:

<div >
    <div >
      <label>Status da instalação</label>
      <p-dropdown
        [filter]="true"
        [options]="installationDeviceStatus"
        [(ngModel)]="labelSelected"
        [style]="{ width: '100%' }"
        autoWidth="false"
        formControlName="installation_status"
      ></p-dropdown>
    </div>
  </div>

  <div
    
    *ngIf="labelSelected == 'Manutenção'"
  >
    <div >
      <label>Motivo da Manutenção</label>
      <input
        
        formControlName="maintenance"
        readonlyDisable
        type="text"
        placeholder="Digite aqui o motivo"
      />
    </div>
  </div>

ts:

  public installationDeviceStatus = [
    {
      label: "Em Operação",
      value: "em operacao",
    },
    {
      label: "Fora de Operação",
      value: "fora de operacao",
    },
    {
      label: "Com Defeito",
      value: "com defeito",
    },
    {
      label: "Manutenção",
      value: "manutencao",
    }
  ];
  labelSelected: string = "Manutenção";

CodePudding user response：

You should access obj labelSelected propery e.g label to compare with string Manutenção. Right now your trying to compare if obj {} equals Manutenção (no it does not).

  <div 
    *ngIf="labelSelected.label === 'Manutenção'" >

CodePudding user response：

labelSelected need to be an object, like this

labelSelected:any={
label: "Manutenção",
value: "manutencao"
}

and the if condition to show div you should be like this

  <div  *ngIf="labelSelected.label == 'Manutenção'" >