在angular6中自动完成

时间:2019-11-21 17:13:39

标签: angular typescript

我可以为我的角度应用程序自动完成工作,ngfor可以在对象数组上进行迭代,将对象数组的索引传递给函数以执行一些操作。

这是我尝试的代码

template.html

  <mat-form-field >
    <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
       <mat-autocomplete #auto="matAutocomplete" [displayWith] = "displayFn">
         <mat-option *ngFor="let option of (filteredOptions | async);index as i" [value] ="option">
           {{option.name}}
         </mat-option>
       </mat-autocomplete>
   </mat-form-field>

打字稿

  onCustomerChange(i) {
    console.log("called" + " "+i); // it always shows i = 0 no matter what I select in drop down
    this.customer.customerNumber = this.customers[i].AccountID;
    this.customer.customerName = this.customers[i].AccountName;
    this.topToolBarService.setCustomer(this.customer);
    this.topToolBarService.sendCustomer(this.customer);
  }

enter image description here

我选择1或2,我总是看到传递了0。我的问题是如何正确传递迭代器的值?

1 个答案:

答案 0 :(得分:0)

类文件:

   ngOnInit() {
           this.customerFilterControl.valueChanges.subscribe((res)=>{
                console.log(res);
                this.onCustomerChange(res);
            });
          }

尝试此操作并从res中选择值