时间戳

首页 > 解决方案 > 如何根据角度中的单选按钮选择来增加变量

angular - 如何根据角度中的单选按钮选择来增加变量

问题描述

我有两个无线电组，如下所示

                        <mat-radio-group
                          [(ngModel)]="firstGroup">
                          <mat-radio-button class="example-radio-button" value=1>Thin Build</mat-radio-button>
                          <mat-radio-button class="example-radio-button" value=2>Medium Build</mat-radio-button>
                          <mat-radio-button class="example-radio-button" value=3>Large, solid body build</mat-radio-button>
                        </mat-radio-group>



                        <mat-radio-group
                          [(ngModel)]="secondGroup">
                          <mat-radio-button class="example-radio-button" value=1>Tall by nature</mat-radio-button>
                          <mat-radio-button class="example-radio-button" value=2>Medium Strength</mat-radio-button>
                          <mat-radio-button class="example-radio-button" value=3>Calm, Slow and relaxed</mat-radio-button>

                        </mat-radio-group>

我有 ngIf 语句及其工作，但变量没有递增

                        <div *ngIf="firstGroup == 1">Value is  {{bvariable + 1}}</div>
                        <div *ngIf="secondGroup == 1">Value is {{bvariable + 1}}</div>

bvariable 在 TS 中初始化

    export class MainNavComponent { bvariable =0;}

如果用户同时单击值为 1 的单选按钮，则 b 变量需要为 2，但显示为 1

不确定，我的方法正确。请纠正我，如果我错了。

标签： angular

解决方案

目前尚不清楚在其他选项组合中应该发生什么，但您可以使用基于两个组选择ngModelChange进行更新，如下所示bvariable

    <mat-radio-group
      [(ngModel)]="firstGroup"
      (ngModelChange)="onFirstGroupChange()">

      <mat-radio-button class="example-radio-button" [value]="1">Thin Build</mat-radio-button>
      <mat-radio-button class="example-radio-button" [value]="2">Medium Build</mat-radio-button>
      <mat-radio-button class="example-radio-button" [value]="3">Large, solid body build</mat-radio-button>
    </mat-radio-group>
    <mat-radio-group
      [(ngModel)]="secondGroup"
      (ngModelChange)="onSecondGroupChange()">

      <mat-radio-button class="example-radio-button" [value]="1">Tall by nature</mat-radio-button>
      <mat-radio-button class="example-radio-button" [value]="2">Medium Strength</mat-radio-button>
      <mat-radio-button class="example-radio-button" [value]="3">Calm, Slow and relaxed</mat-radio-button>
    </mat-radio-group>

    export class MainNavComponent {

      bvariable = 0;
      firstGroup = 0;
      secondGroup = 0;

      onFirstGroupChange() {
        if(this.firstGroup === 1 && this.secondGroup === 1) {
          this.bvariable = this.firstGroup + this.secondGroup;
        } else {
          this.bvariable = 0;
        }
      }
      onSecondGroupChange() {
        if(this.firstGroup === 1 && this.secondGroup === 1) {
          this.bvariable = this.firstGroup + this.secondGroup;
        } else {
          this.bvariable = 0;
        }
      }
    }

您可以对两个无线电组使用相同的处理程序，如果您需要选择值作为数字，您需要使用值绑定，如下所示[value]="1"

例子

推荐阅读