Question

我正在尝试向当前表中添加新行，以便可以在数据列表下有一行，该行可以具有一个保存按钮和一个插入操作，例如保存电话号码。我已经添加了有关新行将去向的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>

Answer 1

首先找到数据长度，如下所示？

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>

我认为primeNg中应该有类似 $ last 和 $ first 的索引，就像我们为* ngFor定义的角度一样。
如果我们在Prime Ng中找到最后一个索引。然后，无需再取另一个dataLength。但是上述解决方案应该适合您。

有谁知道如何向PrimeNg DataTable添加行

1 个答案: