Angular中如何根据mat-select选中值动态绑定mat-input的placeholder

实现方案 #

你可以通过Angular的属性绑定直接关联mat-select的选中值和input的placeholder属性，两步即可实现：

1. 先在组件TS文件中声明绑定用的变量，也可以按需配置占位符映射规则：

// 基础用法直接声明选中值变量即可
selected: string = 'PLANT_NO';

// 如果需要自定义不同选项对应的占位符文本，可以加映射表
placeholderMap: Record<string, string> = {
  PLANT_NO: '请输入工厂编号',
  EQUIP_NO: '请输入设备编号',
  LOCN_DESC: '请输入位置描述',
  EQUIP_GRP_ID: '请输入设备组ID',
  EQUIP_CLS: '请输入设备类别',
  MAINT_ZONE_NAM: '请输入维护区域名称',
  PRNT_PLNT_NO: '请输入上级工厂编号',
  SUBSTATION: '请输入变电站编号',
  IP_PLNT_NO: '请输入IP工厂编号'
}

2. 修改模板代码，做两处调整：

• 将mat-select的单向值绑定改成双向绑定[(value)]="selected"，保证选中值更新时同步到组件变量
• 将input的固定placeholder改成属性绑定，关联selected变量或者映射表

修改后的完整模板代码如下：

<mat-form-field appearance="outline" class="search-field" style="width:40vw">
  <input matInput type="text" class="input" [placeholder]="placeholderMap[selected]" formControlName="searchQuery">
  <!-- 如果不需要自定义映射，直接用拼接写法也可以：[placeholder]="'请输入' + selected" -->
  <mat-select name="ampm" class="ampm" style="width:10vw;" [(value)]="selected">
    <mat-option value="PLANT_NO">PLANT_NO</mat-option>
    <mat-option value="EQUIP_NO" disabled>EQUIP_NO</mat-option>
    <mat-option value="LOCN_DESC" disabled>LOCN_DESC</mat-option>
    <mat-option value="EQUIP_GRP_ID" disabled>EQUIP_GRP_ID</mat-option>
    <mat-option value="EQUIP_CLS" disabled>EQUIP_CLS</mat-option>
    <mat-option value="MAINT_ZONE_NAM" disabled>MAINT_ZONE_NAM</mat-option>
    <mat-option value="PRNT_PLNT_NO" disabled>PRNT_PLNT_NO</mat-option>
    <mat-option value="SUBSTATION" disabled>SUBSTATION</mat-option>
    <mat-option value="IP_PLNT_NO" disabled>IP_PLNT_NO</mat-option>
  </mat-select>
  <button mat-icon-button title="Search">
    <mat-icon>search</mat-icon>
  </button>
</mat-form-field>

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