2

I used Primeng data-table for display selected values from angular select.

Whenever select the option in dropdown that selected values need to be display in primeng data-table.

Here problem I got empty row instead selected value:

enter image description here

The Code:

 <mat-form-field fxFlex="50%">
   <mat-label>Select The NAICS Name Or NAICS Code.</mat-label>
   <mat-select multiple name="cnae"(selectionChange)="cnaeChangeValue($event)">
    <mat-option *ngFor="let cnae of listOfcnae.default.cnaeData" 
       [value]="cnae">
    {{cnae.TextField }}
     </mat-option>
   </mat-select>
</mat-form-field>
<p-table [columns]="cnaeCols" [value]="selectedCnaeValues" [paginator]="true"[rows]="10">
  <ng-template pTemplate="header" let-columns>
     <tr>
         <th *ngFor="let col of columns">
          {{col.header}}
         </th>
     </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns">
        {{rowData[col.filed]}}
      </td>
    </tr>
  </ng-template>
</p-table> 

ts code:
ngOnInit() {
this.cnaeCols = [
      { field:"RowNumber", header: "RowNumber"},
      { filed:"TextField", header: "TextField"},
      { field:"ValueField", header: "ValueField"},
    ]
}
 cnaeChangeValue(eventVal) {
    this.selectedCnaeValues.push(eventVal.value);
  }

And json value:
[
{
 "RowNumber": "1",
 "TextField": "1011201 - FRIGORÍFICO - ABATE DE BOVINOS",
  "ValueField": "168"
}
]
Raduan Santos
  • 1,023
  • 1
  • 21
  • 45
SaranViji
  • 383
  • 2
  • 6
  • 17

1 Answers1

0

I think the material dropdown (selectionChange)="cnaeChangeValue($event) on selection return all selected items in the array and that you are trying to push in the array that's why the table is not showing data.

cnaeChangeValue(eventVal) {
    this.selectedCnaeValues = eventVal.value; // Will work
  }

Solution Created on stackblitz

Hope this will help!

TheParam
  • 10,113
  • 4
  • 40
  • 51
  • If i assign json values is directly it's correct. I need to display based on angular multiple select options. I seclect 4option in angular multiple select means that four values should be display in primng datatable. I need to display specific value from the bulk JSON values. – SaranViji Feb 08 '19 at 09:19
  • I got your problem after push value in array use spread operator to refresh data - this.selectedCnaeValues = [...this.selectedCnaeValues]; – TheParam Feb 08 '19 at 09:23
  • I have added Json values but only one value is display in table – SaranViji Feb 08 '19 at 09:40
  • why are not dirctly assigned like this this.selectedCnaeValues = eventVal.value; – TheParam Feb 08 '19 at 09:46
  • I have array values i need to display those selected values form json values and push empty this.selectedCnaeValues array – SaranViji Feb 08 '19 at 09:49
  • because eventVal.value is return array which you are trying to push in array that's why it's not working – TheParam Feb 08 '19 at 09:50
  • If this solve your problem so please be kind and accept the answer so that others will get help from it – TheParam Feb 08 '19 at 10:02