Angular 4响应式表单：选中指定选项时显示元素

别着急，我来帮你搞定这个需求！用Angular Material实现这个功能其实很直观，咱们一步步来：

第一步：在TS组件里定义选项和绑定变量 #

首先在你的组件类里，先定义下拉框的选项数组，再声明一个变量用来存储当前选中的选项：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 定义下拉选项，最后一个是Other
  dropdownOptions = ['选项1', '选项2', '选项3', 'Other'];
  // 存储选中的选项，初始可以设为空或者默认选项
  selectedOption: string = '';
}

第二步：编写HTML模板（结合你的Bootstrap布局） #

在模板里，用Angular Material的mat-select绑定刚才的变量，然后通过*ngIf指令控制输入框的显示：

<div class="row">
  <div class="col-md-4">
    <mat-form-field appearance="fill">
      <mat-label>选择选项</mat-label>
      <mat-select [(ngModel)]="selectedOption">
        <mat-option *ngFor="let option of dropdownOptions" [value]="option">
          {{ option }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <!-- 只有选中Other时才显示这个输入框 -->
    <mat-form-field *ngIf="selectedOption === 'Other'" appearance="fill" class="mt-2">
      <mat-label>请输入其他内容</mat-label>
      <input matInput placeholder="比如：自定义选项">
    </mat-form-field>
  </div>
</div>

第三步：别忘了导入必要的模块 #

确保你的模块（比如AppModule或者当前组件的特性模块）里导入了这些依赖，不然组件可能无法正常工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms'; // 用于ngModel双向绑定
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

import { YourComponentComponent } from './your-component/your-component.component';

@NgModule({
  declarations: [YourComponentComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule
  ],
  bootstrap: [YourComponentComponent]
})
export class AppModule { }

关键说明： #

• [(ngModel)]="selectedOption"：实现选中值的双向绑定，用户切换选项时，selectedOption会自动同步更新。
• *ngIf="selectedOption === 'Other'"：这个结构指令会根据条件动态渲染输入框——只有当选中的选项是Other时，输入框才会出现在页面上。
• 加上class="mt-2"是为了让输入框和下拉框之间保持一点间距，视觉上更舒服～

这样就能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者Psy Chotic