Реализация Matsort и Matpaginator в компоненте TreeTable углового материала - PullRequest
Новая
       13

Реализация Matsort и Matpaginator в компоненте TreeTable углового материала

1 голос
/ 21 мая 2019

Я использую библиотеку npm ng-material-treetable.Я хочу реализовать matsort и mat paginator в этой библиотеке.

Я пытался добавить метод @ViewChild в файл ng-material-treetable.js в папке fesm5 этой библиотеки, но получил ошибку как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 Заранее спасибо !!

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Это ужасная практика.

При использовании библиотеки NPM вы не должны редактировать код указанной библиотеки, и я объясню почему:

Когда вы запускаете npm i, вы фактически устанавливаете пакетыс удаленного сервера.Спасибо NPM, вы не заменяете уже существующие файлы , если версия не была изменена .

Таким образом, это означает, что у вас должна быть фиксированная версия в вашем файле package.json.Любой модификатор semver сотрет вашу модификацию, как только вы запустите npm i.

Но главная проблема не в этом: главная проблема в непрерывной интеграции или командной работе.

Когда вы отправляете свой код на github, вы не отправляете свои модули узлов .Это означает, что вы не продвигаете свои модификации!И когда у вас есть CI, это ваш инструмент, который загружает пакеты, а не вы: он будет загружать нетронутые пакеты без ваших модификаций.

В конце концов, единственное место, где работает ваша модификация, - это ваш собственный компьютер.

Наконец, даже если таких проблем не было, пакеты написаны на Javascript .Angular использует Typescript: затем он компилирует Typescript в комплект Javascript.

Это означает, что вы не можете использовать Angular-код в файле JS .Это означает, что нет декораторов, нет внедрения зависимостей.Если вы хотите сделать это, вам нужно будет найти скомпилированный код для декораторов и скомпилированный код для внедрения зависимости.

0 голосов
/ 24 мая 2019

Попробуйте изменить код следующим образом: 

  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 paginator / sort может быть не готов.Таким образом, как только шаблон распознает paginator / sort, он назначает его источнику данных

...