Question

我有一个Angular应用，可以将文字请求中的地点提取到Google Places API。这是它的样子：

this.placesService.textSearch(request, (results, placeStatus) => {
  if (placeStatus === google.maps.places.PlacesServiceStatus.OK) {
    for (let i = 0; i < results.length; i++) {
      const place = results[i];
      const photo = results[i].photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 })
      this.getDistance(new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()), (result, status) => {
        if (status === google.maps.DistanceMatrixElementStatus.OK) {
          const distance: string = result.rows[0].elements[0].distance.text;
          const duration: string = result.rows[0].elements[0].duration.text;
          this.places.push(new Place(photo, place.name, place.formatted_address, distance, duration));
        }
      });
      if (i === 4) {
        break;
      }
    }
  }
  console.log(this.places);

如你所见。我在流程结束时记录了地点Array。它显示正确的信息。但是，它并没有像console.log一样快地更新我的前线。这是我的模板：

<ol class="nearby-places">
  <div *ngFor="let place of places; let i = index;">
    <li class="card">
      <figure>
        <img src="{{place.icon}}" />
      </figure>
      <div class="info-container">
        <div>
          <div class="name">
            <p>{{place.name}}</p>
          </div>
          <div class="address">
            <p>{{place.address}}</p>
          </div>
        </div>
        <div class="list-nb">
          <h2>
            {{i+1}}
          </h2>
        </div>
      </div>
    </li>
    <hr *ngIf="i+1 !== places.length">
  </div>
</ol>

显示结果前需要10秒钟。

有没有办法说立即刷新？

Answer 1

这里要注意的第一件事是，为了对ngFor指令更新dom，您需要制作一个副本您的places数组。如果您不进行复制，则ngFor不会知道数组已更改。您可以这样做（请看函数的最后部分）：

this.placesService.textSearch(request, (results, placeStatus) => {
  if (placeStatus === google.maps.places.PlacesServiceStatus.OK) {
   for (let i = 0; i < results.length; i++) {
    const place = results[i];
    const photo = results[i].photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 })
    this.getDistance(new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()), (result, status) => {
    if (status === google.maps.DistanceMatrixElementStatus.OK) {
      const distance: string = result.rows[0].elements[0].distance.text;
      const duration: string = result.rows[0].elements[0].duration.text;
      this.places.push(new Place(photo, place.name, place.formatted_address, distance, duration));
    }
  });
     if (i === 4) {
      break;
     }
   }
  }
  console.log(this.places);
  // HERE make a copy!!
  this.places = this.places.slice();
}

如果使用该代码，ngFor仍未在dom上反映新数组，它将表示您的请求或完成数组更新后的请求不在区域内。如果发生这种情况，您可以手动 detectChanges 或在区域内运行并执行 markForCheck （）。这两个选项均有效，具体取决于您的目标。您可以在网上轻松找到有关此信息的更多信息。这是detectChanges示例：

// In your constructor..
constructor(private cd: ChangeDetectorRef) {..}

// In your func
this.placesService.textSearch(request, (results, placeStatus) => {
  if (placeStatus === google.maps.places.PlacesServiceStatus.OK) {
  for (let i = 0; i < results.length; i++) {
  const place = results[i];
  const photo = results[i].photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 })
  this.getDistance(new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()), (result, status) => {
    if (status === google.maps.DistanceMatrixElementStatus.OK) {
      const distance: string = result.rows[0].elements[0].distance.text;
      const duration: string = result.rows[0].elements[0].duration.text;
      this.places.push(new Place(photo, place.name, place.formatted_address, distance, duration));
    }
  });
  if (i === 4) {
    break;
  }
}
}
console.log(this.places);
// HERE make a copy!!
this.places = this.places.slice();
// and detect changes manually
this.cd.detectChanges();

}

希望这会有所帮助。

HTML列表不会立即更新

1 个答案: