以下是一个基于Angular 8的示例代码,用于根据选择的复选框来显示或隐藏输入框。
首先,我们需要创建一个Angular组件,例如AppComponent。在该组件的模板文件(app.component.html)中,我们将添加一个复选框和一个输入框,并根据复选框的选择状态来显示或隐藏输入框。
在组件的类文件(app.component.ts)中,我们需要添加一个布尔类型的变量showInput,并将其用于控制输入框的显示或隐藏。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
showInput: boolean = false;
}
在上述代码中,showInput变量用于控制输入框的显示状态。当复选框被选中时,showInput的值将变为true,输入框将被显示出来。当复选框未被选中时,showInput的值将变为false,输入框将被隐藏。
请确保在app.module.ts中将FormsModule导入到你的应用程序中,以便使用ngModel指令。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,你可以通过运行你的应用程序来查看结果。当你选中复选框时,输入框将显示出来;当你取消选中复选框时,输入框将隐藏起来。