Question

我正在使用Angular-Material进行Angluar 7项目，并且是第一次使用反应形式。我实现了一个自动完成功能，因此用户可以从EmployeeObjects列表中选择一个雇员。该形式使用Angular反应形式。员工的目标比用户需要知道的要复杂得多。

选择员工以及存储和更新反应式表格都很好。问题在于输入字段中显示的值看起来像[object：object]，因为整个对象将设置为输入字段的[value]。

当我实现一个仅显示雇员姓名的getter时，显示的值看起来正确，但是反应式表单值仅存储格式化的字符串，而不是整个对象。

如何做到这两种方式，向用户显示正确的字符串并将整个值存储在表单中？

感谢您的帮助。

Stackblitz

https://stackblitz.com/edit/angular-autocomplete-employee?file=app%2Fautocomplete-simple-example.html

课程

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

  employeeForm: FormGroup;
  employeeCtrl = new FormControl();
  employees: Employee[] = EmployeeList as Employee[];
  filteredEmployees: Observable<Employee[]>;
  result;
  @Input() employee: Employee;
  @ViewChild(MatAutocomplete) matAutocomplete: MatAutocomplete;

  constructor(private formBuilder: FormBuilder) {
    this.initEmployeeFilters(this.employeeCtrl);
    this.employeeForm = this.createFormGroupWithBuilder(formBuilder);
  }

  ngOnInit() {
  }

  private _filterStates(value: string): Employee[] {
    const filterValue = value.toLowerCase();

    return this.employees.filter(employee => employee.lastname.toLowerCase().indexOf(filterValue) === 0);
  }

  public getFullname(employee: Employee): string {
    return employee.lastname + ', ' + employee.firstname;
  }

  public getEmployee(): Employee {
    return JOHN_DOE;
  }

  private initEmployeeFilters(formCtrl: FormControl) {
    this.filteredEmployees = formCtrl.valueChanges
      .pipe(
        startWith(''),
        map(employee => employee ? this._filterStates(employee) : this.employees.slice())
      );
  }

  createFormGroupWithBuilder(formBuilder: FormBuilder) {
    return formBuilder.group({
      employeeData: formBuilder.group({
        employee: new FormControl(),
      }),
    });
  }

  revert() {
    this.employeeForm.reset();
    this.employeeForm.reset({ employeeData: new Employee() });
  }

  onSubmit() {
    this.result = Object.assign({}, this.employeeForm.value);
    this.result.employeeData = Object.assign({}, this.result.employeeData);
  }
}

模板

<form [formGroup]=„employeeForm" (ngSubmit)="onSubmit()" novalidate>
  <div formGroupName="employeeData" novalidate>
      <mat-form-field>
        <input
          matInput
          type="text"
          placeholder="Name"
          [matAutocomplete]="auto"
          formControlName="name"
        >
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option
            *ngFor="let employee of employees | async"
            [value]="getEmployee(employee)"
          >
            <img
              [src]="employee.profilePicture"
              height="25"
            >
            <span>{{employee.lastname}}, {{employee.firstname}}</span>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
  </div>
  <button type="submit" [disabled]="employeeForm.pristine">Save</button>
</form>

员工类别和员工列表

export class Employee {
  id = 1;
  lastname = '';
  firstname = '';
}

export const JANE_DOE = {
    id: 1,
    lastname: 'Doe',
    firstname: 'Jane',
    profilePicture: ‚url‘
};

export const JOHN_DOE = {
    id: 2,
    lastname: 'Doe',
    firstname: 'John',
    profilePicture: ‚url‘
};

export const EmployeeList: Employee[] = [
    JANE_DOE,
    JOHN_DOE,
];

Answer 1

您可以在mat-autocomplete上使用displayWith输入来完成此操作。

<mat-autocomplete #auto="matAutocomplete" [displayWith]="valueMapper">

然后在您的组件中

public valueMapper = (key) => {
  return key.firstname + ' ' + key.lastname;
};

如何在“自动完成”中仅显示选定对象的特定对象属性，而不是在Angular 7中显示[对象]

1 个答案: