角度材质输入字段在mat-list或mat-option中不起作用

Question

嗨，我有一个这样的代码：

 <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>First name</mat-label>
        <input matInput readonly formControlName="firstName">
        <mat-list *ngFor="let username of mockLdap | async">
          {{username.firstName}}
        </mat-list>
      </mat-form-field>
    </div>

import { Component, OnInit, forwardRef } from '@angular/core';
import { HttpClientService, Employee } from '../service/http-client.service';
import { Router } from "@angular/router";
import { FormGroup, FormBuilder, Validators, FormsModule, NgForm } from '@angular/forms';
import { LDAPUsers } from "../LDAPUsers";
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.css'],
})
export class AddEmployeeComponent implements OnInit {

  LDAPUsers: LDAPUsers;
  ldapUsers: Observable<LDAPUsers[]>;
  user: FormGroup;
  mockLdap: Observable<LDAPUsers[]>;
  private searchTerms = new Subject<string>();

constructor(
    private router: Router,
    private httpClientService: HttpClientService,
    private formBuilder: FormBuilder

  ) { }

  search(term: string): void {
    this.searchTerms.next(term);
    console.log(term);
  }

  ngOnInit(): void {
    this.user = this.formBuilder.group({
      id: [],
      userName: [''],
      firstName: [''],
      lastName: [''],
      mobile: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });

   this.httpClientService.getLDAPUser('username').subscribe
      (data => {
        this.LDAPUsers = data;
        console.log(JSON.stringify(data));

        this.user.patchValue(data);
      }
      )

createEmployee() //some code here
}

我的目标是将input字段放在mat-list标记中，或者以某种方式将它们组合在一起，因为现在它的功能就像接收的数据进入mat-list字段一样，这个字段显示在我的页面上，但是输入字段数据是在我按下submit时发送的，这个字段是空的。到目前为止，我所尝试的一切都导致了错误。我尝试删除input标记，或者将其放入mat-form-field中，然后再放入mat-list中，但都不起作用。如果任何人有某种解决方案，这将对我有很大帮助。

Answer 1

你在你的模块中添加MatInputModule了吗？