Angular 6 ng-template - лучший способ отобразить или скрыть тег изображения

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:

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

Однако я считаю, что для каждой записи он устанавливает hidden в значение true..

Есть ли лучший вариант для этой логики - отображать либо инициалы изображения, либо буквы?

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>