Очистить ячейку редактировать при изменении списка - PullRequest
Новая
       6

Очистить ячейку редактировать при изменении списка

0 голосов
/ 12 марта 2020

когда я сбрасываю и изменяю параметры в своих таблицах, я хочу сбросить редактирование ячейки, потому что когда я изменяю редакцию таблицы, строка становится активной.

Это мой код при изменении списка. 

@ViewChild('table', {static: true}) private _table;

this.listservice.getConfiguration(this.param)
      .subscribe(result => {
        result.data.forEach((element, index) => {
            resultData.push({id : index, element, ...element});
        });
        this._table.closeCellEdit(); // this is the funcion close cell 
        this.title = result.config.description;
        this.cols = result.config.cols;
        this.rows = resultData;
        this.selectedColumns = this.cols;
        this.numberElements = this.rows.length;
        this.optionsTypecontrol(this.cols);
        this.clonedRow = {};
    });

И это журнал ошибок 

ERROR TypeError: this._table.closeCellEdit is not a function
    at SafeSubscriber._next (list.component.ts:98)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at MergeMapSubscriber.notifyNext (mergeMap.js:69)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)

Это не совсем мой код, но он официальный от primng и имеет ту же структуру. Я поставил это, потому что мой оригинальный код очень длинный. 

<p-table [value]="cars" dataKey="vin" editMode="row">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
            <th style="width:8em"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="rowData">
            <td>
                {{rowData.vin}}
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.year" year>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.year}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="{'width':'100%'}"></p-dropdown>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.brand}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.color">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.color}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td style="text-align:center">
                <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil" class="ui-button-info" (click)="onRowEditInit(rowData)"></button>
                <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
            </td>
        </tr>
    </ng-template>
</p-table>

Единственное, что вы должны посмотреть на это html, это элемент html 

<p-cellEditor>

и 

<button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger closeedit" (click)="onRowEditCancel(rowData, ri)"></button>

1 Ответ

0 голосов
/ 21 марта 2020

(Опубликованное решение от имени автора вопроса, чтобы убрать его из вопроса) .

Я знаю, что возможно, есть лучшее решение, но срочность этого требует .

Решение состоит в том, чтобы изменить список в наблюдаемой кнопке get alls с классом closeedit и нажать. 

const a: NodeListOf<HTMLElement> = document.querySelectorAll('.closeedit');
a.forEach(i => i.click());
...