自定义 WjFlexGridColumn 出现列表数据显示不出来问题

通过继承的方式去继承了 WjFlexGridColumn ，但是发现列表数据都为空

1. import { Component, ElementRef, Injector, forwardRef, Inject, SkipSelf, Optional, EventEmitter, ChangeDetectorRef } from '@angular/core';
   
2. import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
   
3. import { WjFlexGridColumn, wjFlexGridColumnMeta } from 'wijmo/wijmo.angular2.grid';
   
4. 
   
5. import { FlexGrid } from 'wijmo/wijmo.grid';
   
6. import { FlexGridXlsxConverter } from 'wijmo/wijmo.grid.xlsx';
   
7. import * as wjcCore from 'wijmo/wijmo';
   
8. import * as wjcXlsx from 'wijmo/wijmo.xlsx';
   
9. import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
   
10. import * as wjcGrid from 'wijmo/wijmo.grid';
    
11. 
    
12. @Component({
    
13.     selector: 'csc-flex-grid-column',
    
14.     template: wjFlexGridColumnMeta.template,
    
15.     inputs: [...wjFlexGridColumnMeta.inputs],
    
16.     outputs: [...wjFlexGridColumnMeta.outputs],
    
17.     providers: [
    
18.         { provide: 'WjComponent', useExisting: forwardRef(() => CscFlexGridColumn) },
    
19.         ...wjFlexGridColumnMeta.providers
    
20.     ]
    
21. })
    
22. export class CscFlexGridColumn extends WjFlexGridColumn {
    
23. 
    
24.     constructor( @Inject(ElementRef) elRef: ElementRef,
    
25.         @Inject(Injector) injector: Injector,
    
26.         @Inject('WjComponent') @SkipSelf() @Optional() parentCmp: any) {
    
27.         super(elRef, injector, parentCmp);
    
28.     }
    
29. 
    
30. 
    
31.     ngOnInit() {
    
32.     }
    
33. }

复制代码

下面的代码是原来的代码，运行是正常的

1.         <wj-flex-grid [itemsSource]="columnHeadLists" [isReadOnly]="true" (selectionChanged)="getCurrentItem()" #flexGrid>
   
2.             <wj-flex-grid-column *ngIf="true" [header]="'xxx'" [binding]="'ICINAM'" [width]="'*'" [align]="'left'"></wj-flex-grid-column>
   
3.             <wj-flex-grid-column [header]="'xxx'" [binding]="'USRNAM'" [width]="'*'" [align]="'left'"></wj-flex-grid-column>
   
4.             <wj-flex-grid-column [header]="'xxx'" [binding]="'USRNBR'" [width]="'*'" [align]="'left'"></wj-flex-grid-column>
   
5.             <wj-flex-grid-column [header]="'xxx'" [binding]="'GODAMT'" [width]="'*'" [align]="'right'"></wj-flex-grid-column>
   
6.             <wj-flex-grid-column [header]="'xxx'" [binding]="'FEEAMT'" [width]="'*'" [align]="'right'"></wj-flex-grid-column>
   
7.             <wj-flex-grid-column [header]="'xxx'" [binding]="'CVTAMT'" [width]="260" [align]="'right'"></wj-flex-grid-column>
   
8.             <wj-flex-grid-column [header]="'xxx'" [binding]="'RMKRMK'" [width]="'*'" [align]="'left'"></wj-flex-grid-column>
   
9.             <wj-flex-grid-column [header]="'xxx'" [binding]="'OPRDAT'" [width]="'*'" [align]="'left'"></wj-flex-grid-column>
   
10.         </wj-flex-grid>

复制代码

但是将 <wj-flex-grid-column> 改成 <csc-flex-grid-column> 就列表完全没显示内容了

1.         <wj-flex-grid [itemsSource]="columnHeadLists" [isReadOnly]="true" (selectionChanged)="getCurrentItem()" #flexGrid>
   
2.             <csc-flex-grid-column *ngIf="true" [header]="'xxx'" [binding]="'ICINAM'" [width]="'*'" [align]="'left'"></csc-flex-grid-column>
   
3.             <csc-flex-grid-column [header]="'xxx'" [binding]="'USRNAM'" [width]="'*'" [align]="'left'"></csc-flex-grid-column>
   
4.             <csc-flex-grid-column [header]="'xxx'" [binding]="'USRNBR'" [width]="'*'" [align]="'left'"></csc-flex-grid-column>
   
5.             <csc-flex-grid-column [header]="'xxx'" [binding]="'GODAMT'" [width]="'*'" [align]="'right'"></csc-flex-grid-column>
   
6.             <csc-flex-grid-column [header]="'xxx'" [binding]="'FEEAMT'" [width]="'*'" [align]="'right'"></csc-flex-grid-column>
   
7.             <csc-flex-grid-column [header]="'xxx'" [binding]="'CVTAMT'" [width]="260" [align]="'right'"></csc-flex-grid-column>
   
8.             <csc-flex-grid-column [header]="'xxx'" [binding]="'RMKRMK'" [width]="'*'" [align]="'left'"></csc-flex-grid-column>
   
9.             <csc-flex-grid-column [header]="'xxx'" [binding]="'OPRDAT'" [width]="'*'" [align]="'left'"></csc-flex-grid-column>
   
10.         </wj-flex-grid>

复制代码

结果如下：



有数据的行数，但是列表头和数据内容都没展示

您好，我需要您提供一下demo帮您查找一下原因。不知道方便吗？

JeffryLI 发表于 2017-12-6 16:56
您好，我需要您提供一下demo帮您查找一下原因。不知道方便吗？

您好，我这边网络有限制，没法把代码传上去，代码的逻辑是在正常的界面上，把自定义的 csc-flex-grid-column 替换掉 wj-flex-grid-column 标签，自定义的控件是上面的那段代码

CSCWijmo 发表于 2017-12-6 17:18
您好，我这边网络有限制，没法把代码传上去，代码的逻辑是在正常的界面上，把自定义的 csc-flex-grid-col ...

那先我给您确认下， wj-flex-grid-column是否支持继承，有结果我立即通知您，谢谢

JeffryLI 发表于 2017-12-6 17:57
那先我给您确认下， wj-flex-grid-column是否支持继承，有结果我立即通知您，谢谢

好的，多谢哈

CSCWijmo 发表于 2017-12-6 19:02
好的，多谢哈

不客气了。

您好，看您的代码应该是在做模块化组件，这块您可以试一下这个操作，需要在您的代码中安装NpmImage的模块化工具，请参照http://blog.gcpowertools.com.cn/post/Wijmo_Module2.aspx这个博客。您看看是否对您有帮助。

JeffryLI 发表于 2017-12-7 09:16
您好，看您的代码应该是在做模块化组件，这块您可以试一下这个操作，需要在您的代码中安装NpmImage的模块化 ...

您好，看了文章，讲的是如何把 wijmo 加到Angular项目中，还有打包的东西，好像没法解决上面的问题

CSCWijmo 发表于 2017-12-7 10:17
您好，看了文章，讲的是如何把 wijmo 加到Angular项目中，还有打包的东西，好像没法解决上面的问题

这个包里面是兼容组件是开发的扩展，如果引用了这个包没有作用的话，说明继承这块的代码就行不通了。希望能帮到您。

JeffryLI 发表于 2017-12-7 10:22
这个包里面是兼容组件是开发的扩展，如果引用了这个包没有作用的话，说明继承这块的代码就行不通了。希望 ...

你好，这个包里面是2016版本，我们现在用的事是2017版本，替换成2016的跑不了