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

在多列中动态显示Angular 6材质单选按钮，可以通过使用Angular的数据绑定和循环结构来实现。

首先，需要在Angular组件中定义一个包含选项的数组，每个选项都有一个唯一的标识符和显示文本。例如：

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

然后，在模板中使用Angular的循环结构（如*ngFor）来动态生成多列，并在每列中显示单选按钮。可以使用Angular Material库中的mat-radio-button组件来创建单选按钮。例如：

<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>

上述代码中，columns-container类和column类可以根据需要进行样式定义，以实现多列布局。

最后，需要在组件中处理选中的单选按钮的值。可以使用Angular的表单模块来实现这一点。首先，在组件类中导入FormsModule和ReactiveFormsModule，并将它们添加到@NgModule的imports数组中。然后，在模板中使用formGroup和formControlName指令来创建表单控件。例如：

<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>

在组件类中，需要创建一个FormGroup实例，并为单选按钮添加一个FormControl实例。然后，可以通过订阅FormControl的值变化来获取选中的单选按钮的值。例如：

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);
    });
  }
}

上述代码中，myForm是一个FormGroup实例，selectedOption是一个FormControl实例，用于存储选中的单选按钮的值。通过订阅selectedOption的valueChanges事件，可以在选中的值发生变化时执行相应的操作。

关于Angular Material的更多信息和使用方法，可以参考腾讯云的相关产品和文档：