Angular 如何使角材料自动完成工作2种方法

我有一个自动完成输入框使用角材料7。当我从后端获取所有列表并将其绑定到自动完成输入的数据源时，我可以得到期望的结果。我是这样做的：

propertyList: GetProperties[] = null;
selectedProperty: GetProperties = null;

ngOnInit() {
    this.createForm();
    this.getPersons();
}

// CREATING THE FORM
createForm() {
    this.form = new FormGroup({
      propertyName: new FormControl('', [Validators.required]),
      propertyTypeId: new FormControl('', [Validators.required]),
      owner: new FormControl('', [Validators.required]),
      cluster: new FormControl(''),
      propertyNumber: new FormControl(''),
      regionCode: new FormControl(''),
      provinceCode: new FormControl(''),
      municipalCode: new FormControl(''),
      barangayCode: new FormControl(''),
      contactNumber: new FormControl('')
    });
}

// GET THE DATA FROM BACKEND
private getPersons = () => {
    this.personService.getPersons().subscribe((data: Person[]) => {
      this.personList = data;

      this.filteredOptions = this.form.controls['owner'].valueChanges.pipe(
        startWith(''),
        map(value => (typeof value === 'string' ? value : value.lastName)),
        map(name => (name ? this._filter(name) : this.personList.slice()))
      );
    });
};

// DISPLAY RESULT IN THE INPUT BOX FOR AUTOCOMPLETE
displayFn(person?: Person): string | undefined {
    return person ? `${person.lastName}, ${person.firstName}` : undefined;
}

// FILTERING WHAT HAVE BEEN TYPED ON THE INPUT BOX
private _filter(name: string): Person[] {
    const filterValue = name.toLowerCase();

    return this.personList.filter(option => option.lastName.toLowerCase().indexOf(filterValue) === 0);
}

这是在html中

<mat-form-field>
    <input
      matInput
      type="text"
      placeholder="Property Owner"
      formControlName="owner"
      id="owner"
      [matAutocomplete]="auto"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [displayWith]="displayFn"
    >
      <mat-option
        *ngFor="let option of filteredOptions | async"
        [value]="option.personId"
      >
        {{ option.lastName }}, {{ option.firstName }}
      </mat-option>
    </mat-autocomplete>
</mat-form-field>

---

你能告诉我怎么做吗？谢谢。

在业主变更中，价值相等。在反应形式中，我更喜欢susbcribe而不是控件的值更改。所以，在创建表单之后

createForm() {
    this.form = new FormGroup({
      ...
   });
   ..here..
   this.form.get('owner').valueChanges.subscribe(res=>{
      const person=this.personList.find(x=>x.owner==res)
      if (person)
      {
          this.form.get('propertyName').setValue(person.propertyName)
          this.form.get('propertyTypeId').setValue(person.propertyTypeId)
          ...
      }
}

---

注意：我更喜欢sintax this.form.get（“…”）而不是this.form.controls[“…”]

谢谢。即使使用控件名也可以这样做。

createForm() {
    this.form = new FormGroup({
      ...
   });
   ..here..
   this.form.get('owner').valueChanges.subscribe(res=>{
      const person=this.personList.find(x=>x.owner==res)
      if (person)
      {
          this.form.get('propertyName').setValue(person.propertyName)
          this.form.get('propertyTypeId').setValue(person.propertyTypeId)
          ...
      }
}