Question

我是Ionic-Angular的新手。事情是我有一个matautocomplete和图标。当您在matautocomplete中选择一个值时，下面显示一个列表。在图标上，单击“我正在显示离子警报控制器”，然后单击“确定”，以编程方式设置matautocomplete的值。虽然在matautocomplete中设置了值，但列表没有刷新。然后，当我再次单击图标或甚至更改窗口时，列表也会刷新。

async showBranches() {
    // this.autocomplete.closePanel();
    const alert = await this.alertController.create({
      header: 'Branch Locations',
      inputs: this.branchArray,
      buttons: [
        {
          text: "CANCEL",
          handler: data => {
            console.log("cancel clicked");
          }
        },
        {
          text: "OK",
          handler: data => {
            console.log("branchId: " + data);
            this.branchID = data;
            this.setBlankOrSelectedBranch();
            
          }
        }],
      cssClass: 'alertCustomCss'
    });
    await alert.present();
  }

<div class="col90">
              <mat-form-field class="fullWidth">
                <input type="text" placeholder="Select Branch Location" matInput [formControl]="myBranch"
                  [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='onBranchSelected($event.option.value)'>
                  <mat-option *ngFor="let branch of filteredBranches | async" [value]="branch">
                    {{branch.branchName}}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
              <ion-icon name="finger-print" matSuffix class="thumb" (click)="showBranches()"></ion-icon>
            </div>

Answer 1

异步操作可能不会触发Angular重新渲染视图，您可以尝试手动通知Angular重新渲染

import { NgZone } from '@angular/core';

constructor(public _ngZone:NgZone){}

public refresh() {
  this._ngZone.run(() => {});
}

离子警报控制器阻止页面刷新

1 个答案: