如何将用户表单输入绑定到类似于结果的视图中

Question

我的应用程序中有一个表单，当用户输入表单时，该表单会通过使用Web API数据的预输入功能自动完成。我想做的是，一旦用户做出选择，就是将该选择绑定到另一个div中，其中{{si_id}}将如下所示。到目前为止，我已经尝试了以下方法，但无济于事：

html绑定到：

 <div class="column col-12">
   <h6 class="tit text-bold">Serial Number</h6>
   <p class="text-small text-gray mb-5">{{si_id}}</p>
</div>

HTML表单字段：

<div class="form-group mb-8">
<div class="col-12 col-sm-12">
   <label class="form-label" for="si_id">Serial Number: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-12 col-sm-12">
<ng-template #rt let-r="result" let-t="term">
   <ngb-highlight [result]="r" [term]="t">here</ngb-highlight>
</ng-template>
<input id="si_id" type="text" placeholder="Serial number" formControlName="si_id" class="form-input"
[ngbTypeahead]="search" [resultTemplate]="rt" />

ts文件：

public si_id = [];

private getSerials() {
    this.service.getSerials(this.customer_id).subscribe((data) => {
      this.loading = true;
      for (var i = 0; i < data['result'].length; i++) {
        this.si_id.push(data['result'][i]);
    }
      console.log('Data' + data);
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }

ngOnInit() {
    this.getSerials();
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      si_id: new FormControl(this.si_id[0], Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_phone_number: new FormControl('', Validators.required),
      u_short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(0),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl(''),
    });
  }

onSubmit() {
    if(this.serviceForm.invalid) {
       this.serviceForm.setErrors({ ...this.serviceForm.errors, 'required': true });
       return;
    }
    //this.loading = true;
    this.uploading = true;
    this.service.postFormData(this.serviceForm.value).subscribe((response: any) => {
      console.log(response);//On success response

    }, (errorResponse: any) => {
      console.log(errorResponse); //On unsuccessful response
      this.error = true;
      this.uploading = false;
    });
    }
  }