如何在角度条件下渲染垫子单选按钮选项？我不想重复div的

Question

我想渲染"serialNumber"如果myService。specialDealer是真实的和"vin"如果myService。specialDealer为false。

我使用了下面的代码来实现它，但我在某处读到*ngIf不能直接应用于垫子-单选按钮选项。我不想重复div。有更好的方法来实现这一点吗?

<mat-radio-group (change)="onChange()" [(ngModel)]="myModel.key">
<mat-radio-button value="contractNumber">{{'certificate'}}</mat-radio-button>
<mat-radio-button value="vin" *ngIf="!myService.specialDealer">{{ 'vin'}}</mat-radio-button>
<mat-radio-button value="serialNumber" *ngIf="myService.specialDealer">{{ 'serialnumber'}}</mat-radio-button>
</mat-radio-group>

Answer 1

可以在单选按钮数组上进行迭代，并在不使用if语句的情况下计算可见条件。

的例子:

export class RadioExample {
radioButtons = [
{ label: 'certificate', 
value: 'contractNumber',
visible: () => true  // <-- call your service here to evalute this condition
},
{ label: 'vin', 
value: 'vin',
visible: () => false  // <-- call your service here to evalute this condition
}
];
// I am filtering my visible buttons here to demostrate how you can
// avoid if statement
// however you might use a pipe on the template to filter
// or another approach to filter
radioButtonsFiltered = this.radioButtons.filter((radiobutton) => radiobutton.visible());
}

<mat-radio-group>
<mat-radio-button
*ngFor="let radio of radioButtonsFiltered"
[value]="radio.value"
>
{{ radio.label | translate }}
</mat-radio-button>
</mat-radio-group>

Answer 2

只需将控件包装在<div>中，并对这些控件应用*ngIf:

<div *ngIf="!claimService.getIsSpecialtyEquipmentDealer">
<mat-radio-button value="vin" >{{ 'vin' | translate }}</mat-radio-button>
</div>
<div *ngIf="claimService.getIsSpecialtyEquipmentDealer">
<mat-radio-button value="serialNumber" >{{ 'serialnumber' | translate }}</mat-radio-button>
</div>