javascript - 如何计算检查的垫子单选按钮的数量?角
问题描述
我想检查表单的单选按钮的数量以保存该数字并将其传递给进度条。
<mat-radio-group name="clientID" [(ngModel)]="model.clientID">
<mat-radio-button *ngFor="let n of CONSTANTS.CLIENT" [value]="n.value">
{{n.display}}
</mat-radio-button>
</mat-radio-group>
我的进度条是这样的:
我的进度条代码是:
<div>
<p>{{progressnumber}}%</p>
</div>
<mat-progress-bar mode="determinate" value="{{progressnumber}}"></mat-progress-bar>
在我的 .ts y 中有硬编码的数字
progressnumber:number = 70;
解决方案
您可以检查单选按钮的更改事件,并据此触发事件并读取如下值:
.ts
import { Component } from '@angular/core';
import { MatRadioChange } from '@angular/material';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
progressnumber:number = 70;
clientID = 70; // I don't know what is your model.clientID is,
// I just use it clientID and fixed a initial value
// of it. You can use yours
clients : any[] = [
{value:70, display:'client 1'},
{value:40, display:'client 2'},
{value:50, display:'client 3'}
]
radioChange(event : MatRadioChange){
this.progressnumber = event.value
}
}
.html
<mat-radio-group name="clientID" [(ngModel)]="clientID">
<mat-radio-button *ngFor="let n of clients" [value]="n.value" (change)="radioChange($event)">
{{n.display}}
</mat-radio-button>
</mat-radio-group>
<div>
<p>{{progressnumber}}%</p>
</div>
<mat-progress-bar mode="determinate" value="{{progressnumber}}"></mat-progress-bar>
工作示例:
推荐阅读
- java - 为什么 java 需要强制类型转换才能将有界类型参数实例化为其上限类?
- python-3.x - 将数据框转换为字典并保留所有值
- python - 带有辅助函数的递归二进制搜索返回 None 而不是 True of False
- python - 字符串操作 col_schema="col1 string,col2 int"。我需要检索 => "col1,col2"
- sql - Couchbase JOIN 查询总是返回空结果
- node.js - const fs = require('fs') 在 NW.js 中为空
- amazon-web-services - 如何在android中集成Appsync api
- .net - 如何在 C# 的 If-else 语句中检查某些数字
- psql - 我正在使用 INSERT INTO,但它正在返回 DATABASE'>
- python - 在 subprocess.run 调用期间 Python 可执行文件的 CPU 使用率异常高