自动完成功能-在选择自动完成功能后,无法填写其他字段

时间:2019-05-05 20:00:34

标签: angular api autocomplete

我已将地址信息返回到“ this.address”

ngOnInit()  {

    // this.getAddresses();

    this.searchAddress.valueChanges.subscribe(
      term => {
        if (term != '') {
    this.addressAutoCompleteService.search(term).subscribe(
      data => {
                  this.addresses = Object.keys(data).map((key)=> {return data[key]}) ;                  
                  console.log('this.address', this.addresses)                 
              });
            }
        })
      }

在控制台上返回的this.address如下所示: enter image description here

能够遍历并自动填充输入字段,如下所示:

 <form>
      <mat-form-field class="container">

        <input type="text"  (input)="onInputChanged($event.target.value)" placeholder="Search addresses ..."
            matInput 
            [formControl]="searchAddress" 
            [matAutocomplete]="auto"
            >  

        <mat-autocomplete #auto="matAutocomplete">
          <ng-container *ngFor='let filteredAddresses of addresses'>
              <mat-option *ngFor="let address of filteredAddresses" [value]="address.Text">
                <small>{{address.Text}}</small>
              </mat-option>
              </ng-container>

        </mat-autocomplete>
    </mat-form-field>
</form>

但是,当我从“选择地址”占位符中选择一个地址时,我无法加载其他字段,如下面指定的addressline1(其他信息从Web api返回)

<div class="tab-pane" id="address" role="tabpanel">
      <div class="row">

 <div class="form-group col-md-3 col-sm-3 col-xs-12">
          <label l10nTranslate
            >addressLine1</label
          >
          <input
            class="form-control"
            [formControl]="control.address.addressLine1"
          />
        </div>

</div>
</div>

以及更改“搜索地址”后如何清除所有其他字段,例如addressline1。

谢谢。

0 个答案:

没有答案