As a beginner in coding, I have created a canvas in Angular and am attempting to pass data received from my server to a function within ngAfterViewInit().
When I hard code the values I want to pass, everything works perfectly. However, if I try to pass data after receiving it from the server, I encounter an undefined error for the values inside ngAfterViewInit().
I am working on passing the following values:
seatsNum: number
rowsNum: number
To these:
var numberOfSeats = this.seatsNum
var numberOfRows = this.rowsNum
Here is the full code:
import { Component, Directive, ElementRef, AfterViewInit, Input, Renderer, ContentChild, ViewChildren, ViewChild } from '@angular/core';
import { ManageShowsService } from '../../services/shows-mananger.service';
import { Router, ActivatedRoute } from '../../../../node_modules/@angular/router';
import { Show } from '../../models/show.model';
import { DomSanitizer } from '../../../../node_modules/@angular/platform-browser';
@Component({
selector: 'app-seat-selection',
templateUrl: './seat-selection.component.html',
styleUrls: ['./seat-selection.component.scss']
})
export class SeatSelectionComponent {
show: any
tempOrderArray = new Array()
orderSeatsClient = []
selectedSeatsClient = []
selectedSeatsServer = [{ "id": 5 }, { "id": 19 }]
seatsNum: number
rowsNum: number
cX: number // X click coordinates
cY: number // Y click coordinates
@ViewChild('canvas') canvasRef: ElementRef;
private canvas: any;
@Input('size') size: number;
@Input('color') color: string;
@Input() width: number;
@Input() height: number;
constructor(private el: ElementRef,
private renderer: Renderer,
private showService: ManageShowsService,
private route: ActivatedRoute,
private sanitizer: DomSanitizer) {
}
sanitize(url: string){
return this.sanitizer.bypassSecurityTrustUrl('http://localhost:3000/' + url);
}
ngOnInit() {
this.showService.getShowById(this.route.snapshot.params['id'])
.subscribe(data => {
console.log(data)
this.seatsNum = data.showsHall[0].rows
this.rowsNum = data.showsHall[0].seats
this.show = {
"hallName": data.showsHall[0].hallName,
"movieName": data.movie[0].movieName,
"movieImg": data.movie[0].movieImg,
"takenSeats": data.takenSeats,
"_id": data._id,
"showDate": data.showDate,
"showStartTime": data.showStartTime,
"showEndTime": data.showEndTime,
}
console.log("from ts" + this.seatsNum, this.rowsNum)
})
}
ngAfterViewInit() {
this.canvas = this.canvasRef.nativeElement;
this.canvas.width = 550;
this.canvas.height = 500;
this.draw();
}
draw() {
var ctx = this.canvas.getContext('2d');
ctx.font = "15px Arial";
var seats = []
var tempOrderArray = []
var orderSeatsClient = []
var selectedSeatsClient = []
var selectedSeatsServer = this.selectedSeatsServer
var numberOfSeats = this.seatsNum
var numberOfRows = this.rowsNum
console.log("from js" + numberOfSeats, numberOfRows)
var counter = 0
function make_base() {
var base_image = new Image();
base_image.src = ('../../../assets/img/screen2.png');
base_image.onload = function () {
ctx.drawImage(base_image, 75, -110);
}
}