Angular 10基于多选选项有条件地渲染div

Question

我最初创建了这个无线电组，它有条件地呈现其他无线电组：

<mat-radio-group #pharmacyGroup class="radio-group" (change)="onPharmacyOptionChange($event.value)">
<mat-radio-button class="radio-item" value="MILT">MILT</mat-radio-button>
<div *ngIf="pharmacyOption === 'MILT'">
<mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
<mat-radio-button class="sub-radio-item" value="MILT - Pharmacist">Pharmacist</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
</mat-radio-group>
</div>
<mat-radio-button class="radio-item" value="Pharmogistics">Pharmogistics</mat-radio-button>
<div *ngIf="pharmacyOption === 'Pharmogistics'">
<mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Manager">Manager</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Buyer">Buyer</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
</mat-radio-group>
</div>
<mat-radio-button class="radio-item" value="Other">Other</mat-radio-button>
<div *ngIf="pharmacyOption === 'Other'">
<mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
<mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
<mat-list-option class="col-md-3" checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
<mat-list-option class="col-md-4" 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;
}

但现在客户端已经指定顶级无线电组实际上需要是一个多选列表。所以我正在尝试实现同样的功能：

<mat-selection-list #pharmacyGroup (selectionChange)="onPharmacyOptionChange($event.options)">
<mat-list-option class="col-md-3" checkboxPosition="before" value="MILT">MILT</mat-list-option>
<div *ngIf="pharmacyOptions.includes('MILT')">
<mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
<mat-radio-button class="sub-radio-item" value="MILT - Pharmacist">Pharmacist</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
</mat-radio-group>
</div>
<mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmogistics">Pharmogistics</mat-list-option>
<div *ngIf="pharmacyOptions.includes('Pharmogistics')">
<mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Manager">Manager</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - Buyer">Buyer</mat-radio-button>
<mat-radio-button class="sub-radio-item" value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
</mat-radio-group>
</div>
<mat-list-option class="col-md-4" checkboxPosition="before" value="Other">Other</mat-list-option>
<div *ngIf="pharmacyOptions.includes('Other')">
<mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
<mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
<mat-list-option class="col-md-3" checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
<mat-list-option class="col-md-4" 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);
}

但我得到了这个错误：

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

如果我输出数组的值，它会显示为它应该显示的值，所以我不确定为什么该值是未定义的。也就是说，也许这不是正确的方法，或者可能有人看到了我的代码的问题。我如何才能真正实现我在这里的目标？

Answer 1

您应该定义pharmacyOptions的初始值，使其成为

pharmacyOptions:string[]=[]

而不是

pharmacyOptions:string[];