在多列中动态显示angular 6材质单选按钮

options = [
  { id: 1, text: '选项1' },
  { id: 2, text: '选项2' },
  { id: 3, text: '选项3' },
  // 其他选项...
];

<div class="columns-container">
  <div class="column" *ngFor="let option of options">
    <mat-radio-button [value]="option.id">{{ option.text }}</mat-radio-button>
  </div>
</div>

<form [formGroup]="myForm">
  <div class="columns-container">
    <div class="column" *ngFor="let option of options">
      <mat-radio-button [value]="option.id" formControlName="selectedOption">{{ option.text }}</mat-radio-button>
    </div>
  </div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;
  options = [
    { id: 1, text: '选项1' },
    { id: 2, text: '选项2' },
    { id: 3, text: '选项3' },
    // 其他选项...
  ];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      selectedOption: null
    });

    this.myForm.get('selectedOption').valueChanges.subscribe(value => {
      console.log('选中的选项:', value);
    });
  }
}