Angular 6 - Kendo UI Grid 单元格模板答案

【问题标题】：Angular 6 - Kendo UI Grid cell templateAngular 6 - Kendo UI Grid 单元格模板
【发布时间】：2019-03-03 11:46:54
【问题描述】：

我试图在 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>

【问题讨论】：

标签： angular html5-canvas kendo-grid angular6

【解决方案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>

【讨论】：