1. 确认在组件文件中引入了MatRadioGroupModule和MatRadioModule：

import { MatRadioGroupModule } from '@angular/material/radio'; import { MatRadioModule } from '@angular/material/radio';

2. 在HTML文件中添加自定义的mat-radio-group组件，并设置[(ngModel)]：

{{ food.viewValue }}

3. 确认在组件文件中设置了selectedValue变量：

selectedValue: string;

4. 在组件文件中添加以下代码，来注册自定义组件：

import { forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const CUSTOM_RADIO_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomRadioComponent), multi: true };

@Component({ selector: 'app-custom-radio', templateUrl: './custom-radio.component.html', styleUrls: ['./custom-radio.component.scss'], providers: [CUSTOM_RADIO_VALUE_ACCESSOR] }) export class CustomRadioComponent implements ControlValueAccessor { ...

writeValue(obj: any): void { this.innerValue = obj; this.onChange(obj); this.onTouched(); }

registerOnChange(fn: any): void { this.onChange = fn; }

registerOnTouched(fn: any): void { this.onTouched = fn; }

setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; } }

5. 将自定义组件的selector放到MatRadioGroupDirective的directive里：

@Directive({ selector: 'mat-radio-group[appCustomRadio]', providers: [ {provide: NG_VALUE_ACCESSOR, useExisting: CustomRadioComponent, multi: true} ] }) export class MatRadioGroupDirective implements AfterViewInit, OnDestroy { ... }

6. 在HTML文件中，将mat-radio-group的selector换成你自定义组件的selector：