Как передать / получить значение радиокнопки?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 FILE

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