Angular - вызов Async Server обновляет контекст холста, но представление холста не обновляется - PullRequest
Новая
       15

Angular - вызов Async Server обновляет контекст холста, но представление холста не обновляется

0 голосов
/ 10 мая 2019

У меня есть компонент Map, который может отображать точки на 2d canvas 


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.
любой намек, любая помощь приветствуется.

...