如果选中单选按钮,则以角度5显示元素

我正在尝试获取一个单选按钮,以便在选中该单选按钮时显示元素。我试过多种不同的方法[(ngModel)会抛出错误。

这是我的表格.ts:

import {Component, Input} from '@angular/core';
import {FormGroup} from "@angular/forms";
import { MdRadioChange } from '@angular/material';
@Component({
  selector: 'activation-role',
  template: `
    <div class="form-group" [formGroup]="group" >
      <mat-radio-group formControlName="role" [attr.data-optional]="canViewDiv">
        <mat-radio-button #{{role.id}} (change)="onRadioChange($event)" class="radio-button-vertical" *ngFor="let role of activation_roles" [value]="role.id">
          <div>{{role.label}}</div> 
          <mat-hint>{{role.additionalText}}</mat-hint>
        </mat-radio-button>
      </mat-radio-group>
    </div>`

})

export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}

这是我的html表单:

<mat-accordion>
        <!-- ROLE ACCORDION -->
        <mat-expansion-panel class="activation-form__role" expanded="true" #roleAccordion>
          <mat-expansion-panel-header #roleAccordionHeader>Your Role</mat-expansion-panel-header>

          <activation-role [group]="roleGroup"></activation-role>

          <mat-action-row>
            <button mat-button color="primary" class="activation-form__role__next-btn" (click)="expandStep(1)" [disabled]="roleGroup.invalid" >Next</button>
          </mat-action-row>
        </mat-expansion-panel>

        <mat-expansion-panel *ngIf="roleGroup?.data-optional === 'true'" class="rmb-form__corporate-details" #strataManagerDetailsAccordion [disabled]="detailsGroup.invalid">
        </mat-expansion-panel>
<mat-accordion>

感谢您的帮助。