代码之家 › 专栏 › 技术社区 › bob.mazzo

角度6 ng模板-显示或隐藏图像标记的最佳方式

kendo-grid angular

bob.mazzo · 技术社区 · 6 年前

在我的 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

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

不过,我相信它已经定下来了 hidden 每个记录都是真的。

1 回复 | 直到 6 年前

bob.mazzo 6 年前

这里有一个解决方法,使用 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>