Question

在我的Kendo UI Grid cell template中，我试图显示图像（如果存在）或显示客户姓名缩写。

 <kendo-grid-column>

	<ng-template kendoGridCellTemplate let-dataItem>
			<i class="circle" style="background: #b5b2ad; 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>
				<img [hidden]="noImage" src="{{ './assets/profiles/customer/' + dataItem.CustomerID + '.jpg' }}" 
					(error)="noImage=true"		
					height="30" width="30" style="border-radius:30px;"/>

			</i>
			
	</ng-template>

 </kendo-grid-column>

我使用img onrrror事件的Angular等效项：

 <img [hidden]="noImage" (error)="noImage=true" src... />

但是我认为每条记录都将hidden设置为true。

此逻辑是否有更好的设计-显示图像还是custer缩写？

Answer 1

这是一种解决方法，使用className=''和margin将图像向左稍微推一点以覆盖首字母。

<ng-template kendoGridCellTemplate let-dataItem>

	<i class="circle" style="background: #b5b2ad; 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>
		<img src="{{ './assets/profiles/customers/' + dataItem.CustomerID + '.jpg' }}" 
			[class.cust-verified]="dataItem.IsVerified"
			onerror="this.style.display='none'; this.className='' "
			(error)="noImage=true"
			height="30" width="30" style="border-radius:30px; margin: -1px 0 0 -23px;" 
			alt="Customer Image"/>
	</i>
	
</ng-template>

Angular 6 ng模板-显示或隐藏图像标签的最佳方法

1 个答案: