在Angular 7中,您可以使用双向绑定和事件处理来实现点击单选按钮时显示值。以下是一个示例代码:
app.component.html:
选择一个选项:
您选择的选项是:{{ selectedOption }}
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
options = ['选项1', '选项2', '选项3'];
selectedOption: string;
showSelectedOption() {
console.log(this.selectedOption);
}
}
在上面的代码中,我们使用*ngFor
指令循环遍历选项数组,并为每个选项创建一个单选按钮。[(ngModel)]
指令用于实现双向绑定,将选中的选项与selectedOption
属性关联起来。当单选按钮的值发生变化时,(change)
事件将触发showSelectedOption
方法,该方法将显示所选选项的值。
您可以根据需要修改选项数组和显示所选选项的方式。