我想获取表单中选中的单选按钮的编号,以保存该编号并将其传递给进度条。
<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>
我的进度条是这样的:
progress bar image
我的进度条的代码是:
<div>
<p>{{progressnumber}}%</p>
</div>
<mat-progress-bar mode="determinate" value="{{progressnumber}}"></mat-progress-bar>
在我的.ts中,您的数字已硬编码
progressnumber:number = 70;
最佳答案
您可以检查单选按钮的change事件,并据此触发事件并读取如下值:
.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>
工作示例:
https://stackblitz.com/edit/angular-material-m1