p-datatable Image Cell :/

Bu kısımda Angular 5 içerisinde kullandığım Prime NG kütüphanesinin datatable ında bir adet resim eklemenin beni ne kadar uğraştırdığından bahsetmeyeceğim. Aksine 1 haftamı hiç ettiğinden az kalsın datatable dan vazgeçeceğimden hiç bahsetmeyeceğim. Çözümü bizzat kendim yazıp buradan meslektaşlarıma, bu işin meraklılarına bir kolaylık sağlamak için notlar alacağım. Kısaca elimde bir datatable var ve içerisine <ımage> atmam gerekiyor fakat bir türlü set edilemiyor zira dinamik olan birşeyden bahsediyoruz ayrıca base64 işlemlerinden de biraz bahsetmiş olalım yeri gelmişken. Upload anında aldığım resimleri o anda göstermek gibi bir ihtiyacım var. Bunu araya ng-template sokarak ve pipe işlemleri ile yaptım.

Umuyorum çözüm olarak işinize yarar iyi çalışmalar.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<p-dataTable [value]="dom" selectionMode="single" [(selection)]="data" (onRowSelect)="onRowSelect($event)" rows="10" [responsive]="true"
  [tableStyle]="{'table-layout':'auto'}">
  <p-header>Medya Dosyalar</p-header>
  <p-columnfield="preview" id="image" header="Önizleme" [style]="{ 'text-align': 'center' , 'padding':'0px'}">
    <ng-templatepTemplate="body" let-i="rowIndex">
      <img [src]="images[i] | safeHtml" style="height:100px;" /> </ng-template>
      </p-column>
      <p-columnfield="fileEventDate" header="Tarih"></p-column>
        <ng-templatelet-metadata="rowData" pTemplate="body">
          <buttontype="button" pButton (click)="prepareDeleteMetadata(metadata)" icon="fa-close">
            </button>
            </ng-template>
            </p-column>
</p-dataTable>