Question

我有一个Map组件，可以在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.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);   
    }

 }

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

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

注意：我如何确定画布上下文已更新？我还有一些其他功能可以正常使用从API接收的数据。

我也尝试了ChangeDetectorRef和NgZone。
任何帮助表示感谢。

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

0 个答案: