Angular 角度搜索框未按预期工作

嗨，我在代码中放了一个searcbox来搜索用户表，并取回指定的用户及其所有属性（名字、电子邮件等）。它可以很好地返回我需要的所有内容，但在我选择首选用户之后，例如，我搜索了“Worker”，有Worker1、Worker2、Worker3，我选择Worker1，而不是只返回他的属性，我可以在输入字段中看到其他两个的属性（名字、电子邮件）

这是我的密码：

<div class="material-input">
      <mat-form-field class="form-group">
        <input id="userNameInput" matInput placeholder="Search user name" formControlName="userName" for="search-box"
          #searchBox id="search-box" (input)="search(searchBox.value)" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          <mat-option *ngFor="let username of mockLdap | async" [value]="username.userName">
            {{username.userName}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>

<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>

---

请将组件代码包括在

search（）

、

mockLdap

、表单创建等中，您可以在何处查看所有三个工作人员详细信息-搜索输入/firstName控件如果您在stackblitz中准备了一个代码的工作示例，这将非常有帮助@AndrewAllen编辑了我的问题并添加了组件和mockLdap类

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 {

  checkboxTrue = true;

  LDAPUsers: LDAPUsers;
  ldapUsers: Observable<LDAPUsers[]>;
  user: FormGroup;
  // Admin: any;
  // Supervisor: any;
  currentlyDisabled: string;
  permissions: string[] = ['Admin', 'Supervisor'];
  mockLdap: Observable<LDAPUsers[]>;
  private searchTerms = new Subject<string>();

ngOnInit(): void {
    this.user = this.formBuilder.group({
      id: [],
      userName: [''],
      firstName: [''],
      lastName: [''],
      mobile: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });
    this.user.setErrors({ required: true });
    this.user.valueChanges.subscribe((newValue) => {
      if (newValue.admin === true || newValue.supervisor === true || newValue.enabled === true) {
        this.user.setErrors(null);
      } else {
        this.user.setErrors({ required: true });
      }
    });
    this.httpClientService.getLDAPUser('username').subscribe
      (data => {
        this.LDAPUsers = data;
        console.log(JSON.stringify(data));

        this.user.patchValue(data);
      }
      )

    this.mockLdap = this.searchTerms.pipe(
      debounceTime(1000),

      distinctUntilChanged(),

      switchMap((term: string) => this.httpClientService.searchLDAPUsers(term))
    );

  }

  createEmployee(): void {
    let formattedObject = this.userManipulate(this.user.value);
    console.log(JSON.stringify(formattedObject));
    this.httpClientService.createEmployee(formattedObject)
      .subscribe(data => {
        this.router.navigate(['employee']);
        alert("User created successfully.");

      });
  };
}

export class LDAPUsers {
    userName: string;
    firstName:string;
    lastName: string;
    mobile: number;
    email: string;
}