Кто-нибудь знает, как добавить строку в PrimeNg DataTable - PullRequest
Новая
       6

Кто-нибудь знает, как добавить строку в PrimeNg DataTable

0 голосов
/ 04 октября 2018

Я пытаюсь добавить новую строку в текущую таблицу, чтобы у меня была строка под списком данных, в которую можно добавить кнопку сохранения и вставить, например, сохранить номер телефона.Я добавил html-комментарии о том, куда пойдет новая строка, но не уверен, как это сделать в PrimeNg.

См. Код ниже: 

<div class="m_datatable m-datatable m-datatable--default m-datatable--loaded">
    <p-dataTable [value]="personPhone.phones"
                 emptyMessage="{{l('NoData')}}"
                 paginator="false"
                 rows="5"
                 tableStyleClass="m-datatable__table">

        <p-column header="{{l('Actions')}}" [style]="{'width':'130px','text-align':'center'}">
            <ng-template let-record="rowData" pTemplate="body">
                <button (click)="deletePhone(phone, personPhone)" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill">
                    <i class="fa fa-times"></i>
                </button>
            </ng-template>
        </p-column>

        <p-column header="{{l('PhoneType')}}">
            <ng-template let-record="rowData" pTemplate="body">
                {{getPhoneTypeAsString(record.type)}}
            </ng-template>
        </p-column>

        <p-column header="{{l('PhoneNumber')}}">
            <ng-template let-record="rowData" pTemplate="body">
                {{record.number}}
            </ng-template>
        </p-column>

        <!--New row to go here-->

    </p-dataTable>
</div>

Я просто хочу такую ​​строку:

<tr>
    <td>
        <button (click)="savePhone()" class="btn btn-sm btn-success">
            <i class="fa fa-floppy-o"></i>
        </button>
    </td>
    <td>
        <select name="Type" [(ngModel)]="newPhone.type" class="form-control">
            <option value="0">{{l("Mobile")}}</option>
            <option value="1">{{l("Home")}}</option>
            <option value="2">{{l("Business")}}</option>
        </select>
    </td>
    <td><input type="text" name="number" [(ngModel)]="newPhone.number" class="form-control" /></td>
</tr>

1 Ответ

0 голосов
/ 04 октября 2018

Сначала найдите длину данных, которую вы получаете, как показано ниже? 

public dataLength:number;    
this.myService.getAllResult('query)
          .subscribe((response: any[]) => {
            this.data = response
            this.dataLength = this.data.length;
     }

Теперь в теле p-шаблона возьмите другую строку и используйте * ngIf и убедитесь, что dataLength больше или равно текущемуИндекс: 

<ng-template pTemplate="body" let-i="rowIndex" let-data>
          <tr>
              <td>{{i + 1}}</td>
              <td>{{data.name}}</td>
              <td>{{data.email}}</td>

          </tr>
          <tr *ngIf="i >= (dataLength -1)">Print your data</tr>
      </ng-template>

Я думаю, что должно быть что-то вроде $ last и $ first index в primeNg, как у нас в angular для * ngFor.
Если мы найдем последний индекс в Prime Ng.Тогда не нужно брать другой dataLength.Но вышеуказанное решение должно работать для вас.

...