Question

我正在使用npm library ng-material-treetable。我想在此库中实现matsort和mat paginator。

我试图在该库的fesm5文件夹中的ng-material-treetable.js文件中添加@ViewChild方法，但错误为unexpected identifier @。

下面是试图修改的代码段（“我的行”是我添加的代码段）-

Line 394 to 416
    TreetableComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        @ViewChild(MatSort) sort: MatSort;                 //My line
        @ViewChild(MatPaginator) paginator: MatPaginator;  //My line
        function () {
            var _this = this;
            this.tree = Array.isArray(this.tree) ? this.tree : [this.tree];
            this.options = this.parseOptions(defaultOptions);
            /** @type {?} */
            var customOrderValidator = this.validatorService.validateCustomOrder(this.tree[0], this.options.customColumnOrder);
            if (this.options.customColumnOrder && !customOrderValidator.valid) {
                throw new Error("\n        Properties " + customOrderValidator.xor.map(function (x) { return "'" + x + "'"; }).join(', ') + " incorrect or missing in customColumnOrder");
            }
            this.displayedColumns = this.options.customColumnOrder
                ? this.options.customColumnOrder
                : this.extractNodeProps(this.tree[0]);
            this.searchableTree = this.tree.map(function (t) { return _this.converterService.toSearchableTree(t); });
            /** @type {?} */
            var treeTableTree = this.searchableTree.map(function (st) { return _this.converterService.toTreeTableTree(st); });
            this.treeTable = flatMap(treeTableTree, this.treeService.flatten);
            this.dataSource = this.generateDataSource();
            this.dataSource.paginator = this.paginator;  //My line
            this.dataSource.sort = this.sort;            //My line
        };

第497行到504行-

TreetableComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ng-treetable, treetable',
                    // 'ng-treetable' is currently being deprecated
                    template: "<table mat-table [dataSource]=\"dataSource\" matSort [ngClass]=\"formatElevation()\">\n\n  <div *ngFor=\"let column of displayedColumns; first as isFirst;\">\n    <ng-container matColumnDef=\"{{column}}\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        {{options.capitalisedHeader ? (column | titlecase) : column}}\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        <div *ngIf=\"isFirst\">\n          <div class=\"value-cell\">\n            <div [innerHTML]=\"formatIndentation(element)\"></div>\n            <mat-icon [ngStyle]=\"{'visibility': element.children.length ? 'visible' : 'hidden'}\" (click)=\"onNodeClick(element)\">\n              {{element.isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}\n            </mat-icon>\n            <div>{{element.value[column]}}</div>\n          </div>\n        </div>\n        <div *ngIf=\"!isFirst\">\n          {{element.value[column]}}\n        </div>\n      </td>\n    </ng-container>\n  </div>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row [ngClass]=\"{'highlight-on-hover': options.highlightRowOnHover}\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n</table>\n",
                    styles: ["table{width:100%}.value-cell{display:flex;align-items:center}mat-icon{cursor:pointer}.highlight-on-hover:hover{background-color:#f0f0f5}td[class*=' mat-column']{width:10vw;min-width:10vw;max-width:10vw}.mat-cell,.mat-header-cell{padding:10px}.vertical-separator{border-left:1px solid #f0f0f5}"]
                }] }
    ];

在此模板代码中，我在表中添加了matSort。但这还没有解决，如果有人对此有想法请帮助。

注意-这段代码来自文件夹结构下的该库-ng-material-treetable/fesm5/ng-material-treetable.js 在此先感谢！

Answer 1

尝试像这样修改代码：

  TreetableComponent.prototype.ngOnInit =
       sorter?: MatSort;
       @ViewChild(MatSort)
       set sort(ms: MatSort) {
           this.sorter = ms;
           if (this.sorter && this.dataSource) {
              this.dataSource.sort = this.sorter;
           }
       }
       paginator?: MatPaginator;
       @ViewChild(MatPaginator)
       set matPaginator(mp: MatPaginator) {
           this.paginator = mp;
           if (this.paginator && this.dataSource) {
               this.dataSource.paginator = this.paginator;
           }
       }

      function () {
          var _this = this;
          this.tree = Array.isArray(this.tree) ? this.tree : [this.tree];
          this.options = this.parseOptions(defaultOptions);
          /** @type {?} */
          var customOrderValidator = this.validatorService.validateCustomOrder(this.tree[0], this.options.customColumnOrder);
          if (this.options.customColumnOrder && !customOrderValidator.valid) {
              throw new Error("\n        Properties " + customOrderValidator.xor.map(function (x) { return "'" + x + "'"; }).join(', ') + " incorrect or missing in customColumnOrder");
          }
          this.displayedColumns = this.options.customColumnOrder
              ? this.options.customColumnOrder
              : this.extractNodeProps(this.tree[0]);
          this.searchableTree = this.tree.map(function (t) { return _this.converterService.toSearchableTree(t); });
          /** @type {?} */
          var treeTableTree = this.searchableTree.map(function (st) { return _this.converterService.toTreeTableTree(st); });
          this.treeTable = flatMap(treeTableTree, this.treeService.flatten);
          this.dataSource = this.generateDataSource();
      };

这可能会解决您的问题，因为在构造和ngOnInit期间分页器/分类可能尚未准备好。这样，模板一旦识别出分页器/排序器，便将其分配给数据源

Answer 2

这是可怕的做法。

使用NPM库时，您不应编辑该库的代码，我将解释原因：

运行npm i时，实际上是从远程服务器安装软件包。谢谢NPM，如果您尚未修改版本，请不要替换现有的文件。

因此，这意味着您的package.json文件中必须具有固定版本。任何semver修饰符都会在您运行npm i的那一刻删除您的修饰。

但是主要问题不存在：主要问题是持续集成或团队合作。

将代码推送到github时，您不推送节点模块。这意味着您不要推送您的修改！当您拥有CI时，这就是下载软件包的工具，而不是您：下载原始软件包，而无需进行修改。

最后，唯一可以进行修改的地方就是您自己的计算机。

最后，即使不存在这些问题，这些程序包也都使用Javascript编写。 Angular正在使用Typescript：然后将Typescript编译为Javascript捆绑包。

这意味着您不能在JS文件中使用Angular代码。这意味着没有装饰器，没有依赖项注入。如果要这样做，则必须找到装饰器的编译代码和依赖项注入的编译代码。

在角材料TreeTable组件中实现Matsort和Matpaginator

2 个答案: