Question

当试图选择单选按钮时，我试图使单选按钮显示一个元素。我尝试了多种不同的解决方案。 [（ngModel）]会抛出错误。

我似乎无法获得通过ngIf传递的无线电值，无论我尝试多少，我似乎都无法获得通过ngIf传递的“ true”语句。

以下是我的.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>

感谢您的帮助。

Answer 1

您的方法存在一些问题。第一件事是，您正在尝试使用子组件内部的布尔值，即父组件（即表单组件）中的激活角色。您需要在子组件更改后将值从子组件发出给父组件，然后根据该值显示然后显示和隐藏父组件中的div。另外，在激活角色中，您不需要通过将父组件的表单组作为输入来使用，因为该组件内部的表单只有一个单选按钮。您可以在不使用激活路线组件内部的表单组和使用ngModel的情况下实现所需的功能。我为您创建了一个stackblitz解决方案，其中我实现了与您的组件类似的激活角色组件。在这种解决方案中。我没有用于您的表单的ts，所以我创建了自己的自定义表单，用于其中的激活角色，基于该角色，隐藏或显示了mat-expnasion-panel。这是解决方案的链接：Show hide div based on radio。在此解决方案中，我从子组件中发出单选按钮的值，并在父组件中使用它。尝试了解解决方案中正在执行的操作，以便您更好地了解角度的输入和输出。有关输入输出的更多信息，请参见Input Output in Angular

如果选择了单选按钮，则在Angular 5中显示元素

1 个答案: