Angular 10 conditionally render div based on multi-select options-CodePudding

I had originally create this radio group that conditionally rendered other radio groups:

      <mat-radio-group #pharmacyGroup  (change)="onPharmacyOptionChange($event.value)">
        <mat-radio-button  value="MILT">MILT</mat-radio-button>
        <div *ngIf="pharmacyOption === 'MILT'">
        <mat-radio-group  (change)="onRadioChange(25, $event.value)">
          <mat-radio-button  value="MILT - Pharmacist">Pharmacist</mat-radio-button>
          <mat-radio-button  value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
        </mat-radio-group>
        </div>
        <mat-radio-button  value="Pharmogistics">Pharmogistics</mat-radio-button>
        <div *ngIf="pharmacyOption === 'Pharmogistics'">
          <mat-radio-group  (change)="onRadioChange(25, $event.value)">
            <mat-radio-button  value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Manager">Manager</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Buyer">Buyer</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-radio-button  value="Other">Other</mat-radio-button>
        <div *ngIf="pharmacyOption === 'Other'">
          <mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
            <mat-list-option  checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
            <mat-list-option  checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
            <mat-list-option  checkboxPosition="before" value="HSV">HSV</mat-list-option>
          </mat-selection-list>
        </div>
      </mat-radio-group>

  public pharmacyOption: string;

  ...

  onPharmacyOptionChange(choice: string): void {
    console.log(choice);
    this.PharmacyOption = choice;
  }

But now the client has specified that the top level radio group actually needs to be a multi-select list. So I'm trying to achieve the same functionality like this:

<mat-selection-list #pharmacyGroup (selectionChange)="onPharmacyOptionChange($event.options)">
        <mat-list-option  checkboxPosition="before" value="MILT">MILT</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('MILT')">
          <mat-radio-group  (change)="onRadioChange(25, $event.value)">
            <mat-radio-button  value="MILT - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button  value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-list-option  checkboxPosition="before" value="Pharmogistics">Pharmogistics</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('Pharmogistics')">
          <mat-radio-group  (change)="onRadioChange(25, $event.value)">
            <mat-radio-button  value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Manager">Manager</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - Buyer">Buyer</mat-radio-button>
            <mat-radio-button  value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-list-option  checkboxPosition="before" value="Other">Other</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('Other')">
          <mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
            <mat-list-option  checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
            <mat-list-option  checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
            <mat-list-option  checkboxPosition="before" value="HSV">HSV</mat-list-option>
          </mat-selection-list>
        </div>
      </mat-selection-list>

  public pharmacyOptions: string[];

  ...

 onPharmacyOptionChange(choice: any): void {
    for (let i of choice){
      console.log(i.value);
      this.pharmacyOptions.push(i.value);
    }
    console.log(this.pharmacyOptions);
  }

But I'm getting this error:

[Error] ERROR – TypeError: undefined is not an object (evaluating 'ctx.pharmacyOptions.includes')
TypeError: undefined is not an object (evaluating 'ctx.pharmacyOptions.includes')

If I output the value of the array it appears as it should so I'm not sure why the value is undefined. That said, maybe this isn't the proper way to do this or maybe someone can see the problem with my code. How could I properly achieve what I'm trying to here?

CodePudding user response：

You should define the initial value of pharmacyOptions so it should be

pharmacyOptions:string[]=[]

instead of

pharmacyOptions:string[];