Question

我正在准备角度为4的自动完成下拉列表。在下拉列表中，我必须显示从各种数组中收集的选项。由于这些数组中的一个需要一些时间来填充数据，因此我使用异步方法。收集完所有数组后，我将所有这些数组连接到一个单独的数组，并使其成为一个Observable。当我测试我的应用程序时，它可以很好地工作但是在使用它之后它会逐渐变慢。我无法弄清楚是否有任何泄漏或异步 - 等待mehtod给出这个问题。

收集所有数组的主阵列：

async  filterAllComponent(userinput){

        this.PlaceArray= await this.PlacesFilterAutocomplete(userinput);
        this.getTransporterArray= this.getfilterTransporter(userinput);
        this.getVehicleArray= this.getfilterVehicles(userinput);
        this.AllDropdownValues=this.getfilteredTransporter.concat(this.getVehicleArray);
        if(this.AllDropdownValues== undefined || typeof(this.AllDropdownValues) == 'object') {
          this.AllDropdownValuesOb= Observable.of([]);
        }    
        this.AllDropdownValuesOb= Observable.of(this.AllDropdownValues);
        console.log("all arrays",  this.AllDropdownValues)


      }

现在是异步PlacesFilterAutocomplete数组：

 async PlacesFilterAutocomplete(autocompleteInputData) {
    if (autocompleteInputData == '' || typeof(autocompleteInputData) == 'object') 
      return null;
    return this.placeData.getPlacesFromPig(autocompleteInputData)
      .toPromise()
      .then(response => this.formatPigResponse(response));
  }

注意：此阵列＆＃34; PlacesFilterAutocomplete＆＃34;需要一些时间来填补所以必须使用承诺。

是否由于异步方法或阵列上的一些垃圾而引起此问题。我找不到。我不是在编写其他数组，因为即使我只使用PlacesFilterAutocomplete，删除其他数组，这个问题仍然存在。

编辑：添加HTML部分：

 <mat-autocomplete #mainAutocomplete="matAutocomplete" #transporterSearch="matAutocomplete" [displayWith]="displayOptionsFields">
            <mat-option
            *ngFor="let value of AllDropdownValuesOb | async" [value]="value" (onSelectionChange)="OptionSelected($event)">
                <mat-icon style="font-size:1em" *ngIf="value.type=='PlaceType'">location_on</mat-icon>
                <mat-icon style="font-size:1em" *ngIf="value.type=='VehicleType'">local_shipping</mat-icon>
                <mat-icon style="font-size:1em" *ngIf="value.type=='TransporterType'">person_pin</mat-icon>
                <mat-icon style="font-size:1em" *ngIf="value.type=='DateType'">person_pin</mat-icon>
                {{ value.value}}
                <mat-icon *ngIf="offlinePlaces" style="font-size:1em; float:right; padding-top:0.6em; color:red;">cloud_off</mat-icon>
            </mat-option>
            <!--transporter-->
        </mat-autocomplete>

应用程序在填充Angular 4中的自动完成下拉时减速

0 个答案: