如何将mat-list字段数据传入input字段？getElementById失效求解

我来帮你分析下问题所在，然后给出可行的解决方案👇

问题根源拆解 #

你的代码有几个核心问题导致功能失效：

1. 元素类型错误：mat-list是列表容器组件，根本没有value属性，你用document.getElementById('listFirstName')获取到的是列表容器，设置value自然不会有任何效果。
2. 逻辑方向搞反：你要实现的是「点击列表项把数据填入input」，但却给readonly的input绑定了onchange事件——readonly的输入框不会触发change事件，而且逻辑完全颠倒了。
3. 不符合Angular设计理念：在Angular里直接操作DOM（比如getElementById）不是推荐做法，框架本身提供了更优雅的数据绑定机制来处理这类场景。

可行解决方案 #

我们用Angular数据驱动的方式来实现需求：

步骤1：修正模板结构与交互逻辑

把列表改成可点击的mat-list-item，绑定点击事件传递选中的姓名，同时移除input上无效的onchange事件：

<div class="material-input">
  <mat-form-field class="form-group" appearance="outline">
    <mat-label>First name</mat-label>
    <input matInput id="firstName" readonly formControlName="firstName">
  </mat-form-field>
  
  <!-- 用mat-list容器包裹可点击的mat-list-item -->
  <mat-list>
    <mat-list-item 
      *ngFor="let username of mockLdap | async" 
      (click)="selectFirstName(username?.firstName)"
    >
      {{username?.firstName}}
    </mat-list-item>
  </mat-list>
</div>

步骤2：修改TS代码，通过表单控件赋值

直接操作Angular的FormControl来设置input的值，完全不需要碰DOM：

// 先确保你的表单已正确初始化（如果还没的话）
import { FormGroup, FormControl } from '@angular/forms';

export class YourComponent {
  myForm = new FormGroup({
    firstName: new FormControl('')
  });

  // 点击列表项时触发的方法
  selectFirstName(firstName: string) {
    // 直接给表单控件设置值
    this.myForm.get('firstName')?.setValue(firstName);
  }
}

额外说明 #

• 从你代码里的async管道来看，mockLdap应该是一个Observable，确保你已经正确导入了AsyncPipe并在模块中声明。
• 用Angular的表单控件赋值，会自动触发框架的变更检测，视图会同步更新，比直接操作DOM更可靠也更符合Angular的设计思路。

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