要解决Angular 7中单选按钮更改不显示隐藏文本的问题,可以使用Angular的双向数据绑定和条件语句来实现。以下是一个解决方法的示例代码:
在组件的HTML模板中,定义一个单选按钮和一个隐藏的文本区域,使用ngModel指令进行双向数据绑定:
显示文本
隐藏文本
这是要显示的文本。
在组件的TypeScript文件中,定义一个变量来控制文本的显示和隐藏:
export class MyComponent {
showText: string = 'false';
}
这样,当单选按钮的选项改变时,showText变量的值也会改变。通过使用ngIf指令,可以根据showText的值来决定是否显示文本区域。
请注意,要使ngModel指令正常工作,需要在组件的模块中导入FormsModule:
import { FormsModule } from '@angular/forms';
@NgModule({
...
imports: [
...
FormsModule
],
...
})
export class MyModule { }
通过以上代码示例,当选择"显示文本"的单选按钮时,文本区域就会显示出来;选择"隐藏文本"的单选按钮时,文本区域就会隐藏起来。