0

i am trying to loop an array each object in this array is a table on html. and it display like this :

<p-table [value]="section" *ngFor="let section of sections">
  <ng-template pTemplate="header">
          <tr>
              <th>Quantity</th>
              <th>Length</th>
              <th>m^2</th>
              <th></th>
          </tr>
          <tr>
              <th colspan="4">
                  <div (click)="showDialog()" class="text-left">+ A - Flat Panel RAW MDF Red Gloss
                      - $95 / sqm
                  </div>
              </th>
              <th colspan="8">
                  <div class="md-inputfield">
                      <input type="text" class="form-control" pInputText>
                  </div>
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData *ngFor="let piece of rowData.Pieces">
          <tr>
              <td>
                  <p-spinner [(ngModel)]="rowData.Quantity"></p-spinner>
              </td>
              <td pEditableColumn>
                  <p-cellEditor>
                      <ng-template pTemplate="input">
                          <input type="text" [(ngModel)]="rowData.Length">
                      </ng-template>
                      <ng-template pTemplate="output">
                          {{rowData.Length}}
                      </ng-template>
                  </p-cellEditor>
              </td>
              <td>
                  {{CalculateTotalArea(rowData)}}
              </td>
              <td>
                  <button pButton type="button" icon="fa-close"></button>
              </td>
          </tr>
      </ng-template>
</p-table>

but this give me an error this.value.sort is not a function and here is array

this.pieces = [{ Quantity: 2, Length: 3, Width: 3, Thickness: 4 }]

this.sections = [ { Pieces: this.pieces, text: "abc" } ]

i am trying to push code into Plunker but i don't know how to upgrade version of primeng to "primeng": "^5.2.0-rc.1", then the Plunker is't working right now anyone help me update the primeng library and suggest me how to resolve this bug . here is the link Plunker : Plunker

beginerdeveloper
  • 785
  • 4
  • 17
  • 43

1 Answers1

1

It is because, p-table expects an array through value however you are passing { Pieces: this.pieces, text: "abc" } which causes the error. Either you have to remove *ngFor="let section of sections" and pass your array like this <p-table [value]="sections"> or if you really want to have bunch of tables in your page, your sections array should be like following (multidimensional):

// for the sake of simplicity, I named your objects as 'item'
this.sections = [
    [item1, item2, item3],
    [item10, item11, item12],
    [item15, item50, item32]
]
Bunyamin Coskuner
  • 8,719
  • 1
  • 28
  • 48
  • Yes, i really want to have the bunch of tables, every single section is a table and piece is a row of a table. can you write exactly what I need here, because i tried but it rases up an compiler error `Type 'any[][]' is not assignable to type 'Sections'` – beginerdeveloper Feb 07 '18 at 02:52
  • Had a slightly different problem in that in my table I was trying to loop through an array and it was repeating rows for each item in the array, for the array length, so 3 items meant 9 rows. This answer's explanation of `[value]="myData"` got me to remove my `*ngFor` loop from the `` section and do this `` , because "let-item" points back to the `[value]="myData"`. Hope this helps others as my issue differs from the question, but the solution was in the above answer. – Rin and Len Nov 30 '22 at 14:06