html 如何在通用数据网格中显示模板

2w2cym1i  于 2022-12-25  发布在  其他
关注(0)|答案(1)|浏览(116)

我是一个初学者开发人员,我会非常感谢你的帮助,我建立了一个通用的数据网格组件使用Angular 材料库。我提出了许多其他组件的组件。我每次发送适当的数据。我有列,我需要提出一个模板,如:img,button,input ...我尝试使用ng-template,但问题是我必须为每列创建一个特殊的ng-template,并且组件与组件之间存在差异。我还尝试在某个数据上运行函数,它激活了函数,但我无法发送数据的参数。我想知道该方法是否正确或原始,您建议我怎么做?谢谢你的帮助
网格数据. ts '

@ContentChild('one') one!: TemplateRef<ElementRef>;
@ContentChild('two') two!: TemplateRef<ElementRef>;
@ContentChild('three') three!: TemplateRef<ElementRef>;

第一个月

<td  *matCellDef="let element" mat-cell [style.width]="header.width" 
    <div *ngIf="!header.template && header.type!='img'">{{element[header.fieldName]}}</div>
    <div *ngIf="!header.template && header.type=='img'">
       <img src="../../../assets/Images/{{element[header.fieldName]}}.jpg"  class="img" > </div>
    <div *ngIf="header.template && header.template=='one'" ><ng-template #f [ngTemplateOutlet]="one"></ng-      template></div>
    <div *ngIf="header.template && header.template=='two'" ><ng-template #f [ngTemplateOutlet]="two"></ng-template></div>
    <div *ngIf="header.template && header.template=='three'" ><ng-template #f [ngTemplateOutlet]="three"></ng-template></div>
</td>

use on datagrid such as product component: product.ts

this.gridServ.initialHeadings = [
        { fieldName: 'iProductId', display: 'קוד', type: 'string', width: '5%' },
        { fieldName: '', display: "הוסף/הסר ממאגר", type: 'string', width: '10%',template:'one'  },
        { fieldName: 'iProductId', display: "תמונה", type: 'img', width: '7%' },
        { fieldName: '', display: "פרטים", type: 'string', width: '4%' ,template:'two' },
        { fieldName: '', display: "הסטוריה", type: 'string', width: '4%' ,template:'three' },
        { fieldName: 'nvProductName', display: "שם מוצר", type: 'string', width: '12%' },
        { fieldName: 'nvCompanyName', display: "שם חברה", type: 'string', width: '10%' },
        { fieldName: 'nvCommet', display: "הערה", type: 'string', width: '13%' },
        { fieldName: "nvProductCategortName", display: "קטגוריה", type: 'string', width: '10%' }]
        this.gridServ.data=data

product.html

<app-data-grid *ngIf="showGrid">
    <ng-template #one><img src="../../../../assets/Images/Delete.png"  (click)="ddd($event)"></ng-template>
    <ng-template #two><img src="../../../../assets/Images/edit.png" (click)="editProduct(3)"></ng-template>
    <ng-template #three><img src="../../../../assets/Images/plus.png"></ng-template>
  </app-data-grid>

'
尝试到使用ng-template和搜索在谷歌

dxxyhpgq

dxxyhpgq1#

您可以使用@tushargoshbd/ngx-datatable npm库
1.可使用安装

npm i @tusharghoshbd/ngx-datatable

1.然后导入到您正在使用的模块。
祝你好运!

相关问题