我是一个初学者开发人员,我会非常感谢你的帮助,我建立了一个通用的数据网格组件使用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和搜索在谷歌
1条答案
按热度按时间dxxyhpgq1#
您可以使用@tushargoshbd/ngx-datatable npm库
1.可使用安装
1.然后导入到您正在使用的模块。
祝你好运!