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

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。

此外，在activation-role中，您不需要通过作为输入传递来使用父组件的表单组，因为该组件内部的表单只有一个单选按钮。您可以在不使用激活路由组件内的表单组和使用 ngModel 的情况下实现您想要的效果。

我已经为您创建了一个 stackblitz 解决方案，其中我实现了与您的组件类似的激活角色组件。我不知道表单组件，所以我创建了自己的自定义表单并将其用于激活角色，并且基于激活角色组件中的单选按钮，隐藏或显示了一个 mat-expnasion-panel。这是解决方案的 link ： Show hide div based on radio 。在此解决方案中，我从子组件发出单选按钮的值并在父组件中使用它。尝试了解解决方案中正在执行的操作，以便您可以更好地理解 angular 中的输入和输出。有关输入输出的更多信息，请参阅 Input Output in Angular

更新@Gaurang Sondagar 我已经根据您的要求修改了stackblitz。它包含 2 个组件，form-component 和 expansion-panel。扩展面板包含包含面板和单选组。

在 form-component 中有 allRadioPanels 数组，使用它来渲染面板。该数组的每个对象都包含每个面板的单选按钮的绑定 SelectedValue、每个面板的绑定 Comments 值和 CommentsRequiredValue 以告知选择的选项意味着该面板需要注释。

底部有提交按钮，如果对于任何面板，CommentsRequiredValue 如果等于 SelectedValue 和 Comments 为空白。

例如，对于面板 2，CommentsRequiredValue 是 Option 2，SelectedValue 最初也设置为 Option 2。如果您从选项 2 更改面板 2 单选按钮的值或在其中输入评论，最初禁用的提交按钮将启用。

所有面板的工作方式类似。

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

If radio button is selected, show element in Angular 5

angular

angular5