Angular 5表格未更新问题：从Angular Maps获取地点详情无法渲染

看起来你遇到的是Angular变更检测的典型问题——Google Places Service的getDetails回调函数是在Angular的**Zone（执行上下文）**之外运行的，所以当你在回调里给infoResults赋值时，Angular并没有检测到数据变化，自然不会更新表格视图。

下面是几种可行的解决方案：

方案1：使用NgZone包裹回调逻辑（推荐） #

Angular的NgZone服务可以帮你把代码拉回Angular的变更检测范围内，确保数据更新能被及时感知。

步骤： #

1. 首先在组件中导入并注入NgZone：

import { Component, OnInit, NgZone } from '@angular/core';

constructor(private mapsAPILoader: MapsAPILoader, private zone: NgZone) { }

2. 在getDetails的回调里，用zone.run()包裹你的赋值逻辑：

ngOnInit() { 
  this.mapsAPILoader.load().then(() => { 
    this.placesService = new google.maps.places.PlacesService(document.createElement('div')); 
    this.placesService.getDetails( 
      { placeId: this.placeID }, 
      (pR, s) => { 
        if(s === 'OK') { 
          this.zone.run(() => {
            this.infoResults = this.makeInfoArray(pR);
          });
        } 
      }); 
  }); 
}

方案2：将回调包装为Promise（更符合Angular异步风格） #

你可以把getDetails的回调转换成Promise，这样就能用async/await语法，确保代码在Angular Zone内执行：

ngOnInit() { 
  this.mapsAPILoader.load().then(async () => { 
    this.placesService = new google.maps.places.PlacesService(document.createElement('div')); 
    
    const placeDetails = await new Promise((resolve, reject) => {
      this.placesService.getDetails(
        { placeId: this.placeID },
        (pR, s) => {
          if (s === 'OK') resolve(pR);
          else reject(new Error(`Places API error: ${s}`));
        }
      );
    });

    this.infoResults = this.makeInfoArray(placeDetails as google.maps.places.PlaceResult);
  }); 
}

方案3：手动触发变更检测（备选） #

如果上面两种方式都不适用，你也可以手动调用变更检测来通知Angular更新视图：

1. 导入并注入ChangeDetectorRef：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

constructor(private mapsAPILoader: MapsAPILoader, private cdr: ChangeDetectorRef) { }

2. 赋值后手动触发检测：

ngOnInit() { 
  this.mapsAPILoader.load().then(() => { 
    this.placesService = new google.maps.places.PlacesService(document.createElement('div')); 
    this.placesService.getDetails( 
      { placeId: this.placeID }, 
      (pR, s) => { 
        if(s === 'OK') { 
          this.infoResults = this.makeInfoArray(pR);
          this.cdr.detectChanges(); // 手动触发变更检测
        } 
      }); 
  }); 
}

额外检查项 #

最后别忘了确认：

• infoResults是组件的公共属性（Angular默认是public，除非你手动设为private），确保模板能访问到它。
• 表格的*ngFor绑定正确，比如：

<table>
  <tr *ngFor="let item of infoResults">
    <td>{{ item.fieldName }}</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者S K