ngFor不要在來自谷歌地點自動完成的place_changed事件之后立即顯示所有專案

我需要在 place_changed 事件之后將結果添加到串列中。我在我找到位置的輸入下方顯示串列。事件有效，結果被推送到陣列項。但問題是新添加的專案不會立即顯示。它在一段時間后或當我單擊顯示此輸入的表單時顯示。

.ts：

  @ViewChild('locationInput', { static: true }) input: ElementRef;
  autocomplete;
  items = [];
 ngOnInit() {
    this.autocomplete = new google.maps.places.Autocomplete(this.input.nativeElement, this.localityOptions);
    this.autocomplete.addListener('place_changed', () => {
      this.addToListSelectedItem();
    });
  }

  public addToListSelectedItem() {
    if (this.input.nativeElement.value) {
      this.items.push(this.input.nativeElement.value);
      this.input.nativeElement.value = '';
    }
  }

.html：

 <input
      #locationInput
      class="shadow-none form-control"
      formControlName="locality"
      placeholder=""
      [attr.disabled]="locationForm.controls['region'].dirty ? null : true"
    />
<div *ngFor="let item of items; let index = index">
      <div class="listOfLocation">
        <div class="itemList">{{ item }}</div>
        <img [src]="icons.cross" class="delete-button-img" alt="edit-icon" (click)="deleteTask(index)" />
      </div>
    </div>

謝謝您的幫助！

uj5u.com熱心網友回復：

可能您的組件更改檢測策略是 OnPush 或 google autocomplete 正在 zone.js 之外運行：

 changeDetection: ChangeDetectionStrategy.OnPush

由于 items 是陣列并且它通過參考存盤在記憶體中，因此您需要手動運行更改檢測：

constructor(private cdr: ChangeDetectorRef)

public addToListSelectedItem() {
  ...
  this.input.nativeElement.value = '';
  this.cdr.detectChanges();

uj5u.com熱心網友回復：

更好的做法是使用 RxJS Subject、items$ 的 Observable 并使用異步管道。異步管道就像魔法一樣作業，更新模板:-)！

@ViewChild('locationInput', { static: true }) input: ElementRef;
autocomplete;
itemsSubject$ = new Subject<any[]>();   
items$ = this.itemsSubject$.asObservable();
// Use a separate array to hold the items locally:
existing = [];

ngOnInit() {
    this.autocomplete = new google.maps.places.Autocomplete(this.input.nativeElement, this.localityOptions);
    this.autocomplete.addListener('place_changed', () => {
      this.addToListSelectedItem();
    });
  }

public addToListSelectedItem() {
    if (this.input.nativeElement.value) {
       // Use spread syntax to create a new array with the input value pushed at the end:
       this.existing = [...this.existing, this.input.nativeElement.value];
       // Send the newly created array to the Subject (this will update the items$ Observable since it is derived from this Subject): 
       this.itemsSubject$.next(this.existing);
       this.input.nativeElement.value = '';
    }
  }

// I added the deleteTask implementation to show you how this works with the subject:
deleteTask(index: number) {
    // The Array "filter" function creates a new array; here it filters out the index that is equally to the given one:
    this.existing = this.existing.filter((x, i) => i !== index);
    this.itemsSubject$.next(this.existing);
  }

在模板中：

<input
      #locationInput
      class="shadow-none form-control"
      formControlName="locality"
      placeholder=""
      [attr.disabled]="locationForm.controls['region'].dirty ? null : true"
    />
<!-- Only difference here is adding the async pipe and using the items$ Observable instead -->
<div *ngFor="let item of items$ | async; let index = index">
      <div class="listOfLocation">
        <div class="itemList">{{ item }}</div>
        <img [src]="icons.cross" class="delete-button-img" alt="edit-icon" (click)="deleteTask(index)" />
      </div>
    </div>

有關此概念中 RxJS 主題的作業示例，請參閱https://stackblitz.com/edit/angular-ivy-dxfsoq?file=src/app/app.component.ts。

也許超出這個問題，但既然你使用的是反應形式，為什么不使用 this.locationForm.get('locality').setValue('...') 來設定輸入而不是使用 ViewChild 來處理輸入？以這種方式進行更多控制，然后使用 ViewChild。

標籤：javascript 有角的 谷歌地图 google-places-api

上一篇：反應谷歌地圖找到中點

下一篇：為next.js jest測驗頁面渲染（視覺）