如何传递/获取单选按钮值？ Angular2 +材料？

Question

HTML文件

<mat-radio-group [(ngModel)]="selectRankExport">
                        <div class="row ">
                           

                            <mat-label class="col-md-2">Rank 1</mat-label>

                            <mat-radio-button
                                class="col-md-2"
                                value="1"
                            ></mat-radio-button>

                        </div>
                        <div class="row">
                            <mat-label class="col-md-4"></mat-label>
                            <mat-label class="col-md-2">Rank 2</mat-label>
                            <mat-radio-button
                                class="col-md-2"
                                value="2"
                            ></mat-radio-button>
                         
                        </div>
                        <div class="row ">
                            <mat-label class="col-md-4"></mat-label>
                            <mat-label class="col-md-2">Rank 3</mat-label>
                            <mat-radio-button
                                class="col-md-2"
                                value="3"
                            ></mat-radio-button>
                          
                        </div>
                        <div class="row ">
                            <mat-label class="col-md-4"></mat-label>
                            <mat-label class="col-md-2">Rank 4</mat-label>
                            <mat-radio-button
                                class="col-md-2"
                                value="4"
                            ></mat-radio-button>
                           
                        </div>
                    </mat-radio-group>
                    <button
                                mat-button
                                mat-raised-button
                                color="primary"
                                
                                
                            >
                                Save
                            </button>

TS文件

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
selectRankExport = '1';
    rankOne;
    rankTwo;
    rankThree;
    rankFour;

    seeValue(){
      console.log('print')
    }
}

我想打印每个单选按钮值，即如果您选择一个单选按钮，那么console.log中应该打印1个值，如果我选择了单选按钮2，则在控制台日志中该值应该为2 ...如何打印单选按钮控制台中的值或如何存储单选按钮值或如何获取单选按钮值？

在这里是我的StackBlitz链接---> https://stackblitz.com/edit/radio-button-1238719823791

Answer 1

尝试一下：

HTML代码：

<mat-radio-group [(ngModel)]="selectRankExport" (ngModelChange)="setValue()">
    <div class="row ">
        <mat-label class="col-md-2">Rank 1</mat-label>
        <mat-radio-button class="col-md-2" value="1"></mat-radio-button>
    </div>

    <div class="row">
        <mat-label class="col-md-4"></mat-label>
        <mat-label class="col-md-2">Rank 2</mat-label>
        <mat-radio-button class="col-md-2" value="2">

    </mat-radio-button>
    </div>
    <div class="row ">
        <mat-label class="col-md-4"></mat-label>
        <mat-label class="col-md-2">Rank 3</mat-label>
        <mat-radio-button class="col-md-2" value="3"></mat-radio-button>

    </div>
    <div class="row ">
        <mat-label class="col-md-4"></mat-label>
        <mat-label class="col-md-2">Rank 4</mat-label>
        <mat-radio-button class="col-md-2" value="4"></mat-radio-button>

    </div>
</mat-radio-group>
<button mat-button mat-raised-button color="primary">
        Save
</button> 

在您的ts文件中：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
    selectRankExport = '1';
    rankOne;
    rankTwo;
    rankThree;
    rankFour;

    setValue(){
      console.log(this.selectRankExport)
    }
}

StackBlitz Example