角度 6 - 剑道 UI 网格单元格模板

Question

我正在尝试在 Angular 6 的kendoGridCellTemplate中放置一个<canvas>元素。但是，我收到一个错误："Cannot read property 'nativeElement' of undefined".

如果我通过将<canvas>放在网格上方来测试它，我可以看到它有效。然而，在<ng-template>内部并非如此。

我想主要问题是：这能做到吗？如果是这样，我做错了什么。

export class CustomerListComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit{
...
	@ViewChild("customerInitials") customerInitials;
...
constructor() {  }

...

drawInitials () {
	let colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
	let name = "Bob Mazzo";
let nameSplit = name.split(" ");
let initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase(); 
let charIndex = initials.charCodeAt(0) - 65;
let colourIndex = charIndex % 19;
// GET CANVAS HERE !
	this.canvas = this.customerInitials.nativeElement;
	  this.context = this.canvas.getContext("2d");

let canvasWidth = this.canvas.width;
let canvasHeight = this.canvas.height;
let canvasCssWidth = canvasWidth;
let canvasCssHeight = canvasHeight;
if (window.devicePixelRatio) {    
this.canvas.width = canvasWidth * window.devicePixelRatio;
this.canvas.height = canvasHeight * window.devicePixelRatio;
this.canvas.style.width =  canvasCssWidth;
this.canvas.style.height = canvasCssHeight;
this.context.scale(window.devicePixelRatio, window.devicePixelRatio);
}
this.context.fillStyle = colours[colourIndex];
this.context.fillRect (0, 0, this.canvas.width, this.canvas.height);
this.context.font = "16px Arial";
this.context.textAlign = "center";
this.context.fillStyle = "#FFF";
this.context.fillText(initials, canvasCssWidth / 2, canvasCssHeight / 1.5);
}
}

<kendo-grid-column>
	<ng-template kendoHeaderTemplate let-column></ng-template>
	<ng-template kendoGridCellTemplate let-dataItem>		
		{{ drawInitials() }}
		<canvas #customerInitials id="user-icon" width="35" height="35" ></canvas>
	</ng-template>				
</kendo-grid-column>

Answer 1

我的解决方案放弃了canvas元素，只使用circle类和span：

getCustomerInitials(dataItem) {
	let first = dataItem.FirstName !== undefined ? dataItem.FirstName[0].toUpperCase() : '';
	let last = dataItem.LastName !== undefined ? dataItem.LastName[0].toUpperCase() : '';
	return first + last;

}

<kendo-grid-column>
	<ng-template kendoHeaderTemplate let-column></ng-template>
	
	<ng-template kendoGridCellTemplate let-dataItem>
		<a>
			<i class="circle" style="background: antiquewhite; display: inline-flex; height: 30px; width: 30px;
									 border-radius: 50%; border: white; border-style: solid; border-width: 1px;">						
				<span style="margin: 6px 0 0 5px; color: #000;font: 14px Arial;">
					{{ getCustomerInitials(dataItem) }}
				</span>
			</i>						
		</a>
	</ng-template>
</kendo-grid-column>