Html Angular-异步服务器调用正在更新画布上下文，但画布视图未更新

我有一个地图组件，可以在2d画布上渲染点

map.component.ts

export class ........
{
  @ViewChild('canvas') public canvas: ElementRef; 
  private context: CanvasRenderingContext2D;  
  private Mapcanvas: HTMLCanvasElement;

  @Input() data:any;

  ngAfterViewInit()
  { 
  this.Mapcanvas=this.canvas.nativeElement; 
  this.context=this.Mapcanvas.getContext('2d'); 
  }
  public redraw()
  {
  //it takes the data(specified as Input() property which consists of coordinates) 
  //and do some preprocessing on data
  // and render it using 
   //   for Each coordinate =>  this.context.fillRect(Coordinate.x,Coordinate.y,width,height); 

  } 
}

这里的问题是当我加载父组件时 它正在显示没有数据的map.component。 数据正确地从API中获取，并由map.component接收

画布上下文已更新我面临的唯一问题是视图未更新

注: 如何识别画布上下文已更新？ 我还有一些其他功能，这些功能与从API接收到的数据一样正常工作

我也试过了ChangeDetectorRef和NgZone。
任何提示和帮助都将不胜感激

map.component.html

<canvas #canvas id='canvas' style='left:0px; top:0px;' custom='sd'>
    </canvas> 

parent.component.html

<map #map id="map" [data]='data | async'> </map>  

parent.component.ts

export class ........
{ 
public data: Observable<any[]>;
private _data: BehaviorSubject<any[]>; 

@ViewChild('map')  Map:MapComponent; 


constructor(private _remoteService: dataService) {  
  this._data = new BehaviorSubject([]);
  this.data = this._data.asObservable();  
  }

  async loadData()
  {
   this._data.next(await this._remoteService.RemoteFunction().toPromise());
  }  

}

 Sevice.ts


export class......
 {  
    RemoteFunction():any
    { 
          return  this._http.get(URL);   
    }

 }