Javascript 如何将物料列表字段中的数据输入到输入字段中？

我正在尝试将数据从

mat列表

字段获取到

输入

字段。我用

getElementById

尝试了它，但它不起作用。有什么解决办法吗

这是我的密码：

<div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>First name</mat-label>
        <input matInput id="firstName" onchange="getDataFromList(this.value)" readonly formControlName="firstName">
        <mat-list id="listFirstName" *ngFor="let username of mockLdap | async">
          {{username?.firstName}}
        </mat-list>
      </mat-form-field>
    </div>

---

首先，输入元素具有readonly属性。其次，我建议通过Angular的表单设置输入值，而不是访问HTML元素。如果删除readonly属性可能会起作用？很遗憾，我现在无法测试它。是否要使用mat列表选项？还是选择一个垫子？或者在垫子上列出复选框？对于我来说，使用mat list作为输入毫无意义：（@Eliseo我搜索一个用户并获取其属性，例如firstName，但我无法在

input

字段中获取它，它只能与

mat list

一起使用，我也不想使用它，但如果我不使用它，我的代码会崩溃

 getDataFromList(val) {
    (document.getElementById('listFirstName') as HTMLInputElement).value = val;
  }