Prime Community Forum

I have a page with a p-table on it, after I select a row I press a button to display a modal dialog also with a p-table on it. I load the data on the dialog's p-table base on the row selected. The table on the dialog does actually show the correct number of rows, but no data in the rows. Not sure why. Below I am including the html code and typescript code
for the page. Any help would be appreciated.

Thanks,
Kent

<div id="container">
<div id="content">
<p-table [value] = "priMaterial" selectionMode="single" [(selection)]="selectedItem"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [loading]="loading">
<ng-template pTemplate="header">
<tr>
<th style="width:50px">+/-</th>
<th>Item #</th>
<th style="width:100px">Type</th>
<th style="width:75px">Select</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-PriMaterial>
<tr [pSelectableRow]="PriMaterial">
<td style="text-align: center">{{PriMaterial.AddRemove}}</td>
<td>{{PriMaterial.ItemNumber}}</td>
<td style="text-align: center">{{PriMaterial.ItemType}}</td>
<td style="text-align: center">{{PriMaterial.Selected}}</td>
</tr>
</ng-template>
</p-table>
</div>
<div id="buttonbar">
<table width="100%">
<tr>
<td><input class="keyboard" type="text" id="txtLicencePlate" clientidmode="Static" style="width:115px"/><img id="icon" src="../assets/keyboard.png"></td>
</tr>
</table>
<table width="100%">
<tr>
<td><button class="stdbutton" id="btnAdd" (click)="btnAdd_Click()">Add</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnRemove" (click)="btnRemove_Click()">Remove</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnRestore" (click)="btnRestore_Click()">Restore</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnAltMaterial" (click)="btnAltMaterial_Click()">Edit Alt Material</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnJobInfo" (click)="btnJobInfo_Click()">Switch Pocket Grid</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnClose" (click)="btnClose_Click();">Close</button></td>
</tr>
</table>
</div>
</div>

<p-dialog header="Edit Alt Material" [(visible)]="display" modal="modal" width="650" closable="false">
<div class="modal-body" style="width:450px">
<p-table [value]="altMaterial" selectionMode="single" [(selection)]="selectedAltItem"
(onRowSelect)="onRowAltSelect($event)">
<ng-template pTemplate="header">
<tr>
<th style="width:50px">+/-</th>
<th>Item #</th>
<th style="width:100px">Type</th>
<th style="width:75px">Select</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-AltMaterial>
<tr [pSelectableRow]="AltMaterial">
<td style="text-align: center">{{altMaterial.AddRemove}}</td>
<td>{{altMaterial.ItemNumber}}</td>
<td style="text-align: center">{{altMaterial.ItemType}}</td>
<td style="text-align: center">{{altMaterial.Selected}}</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="modal-buttonbar">
<table width="100%">
<tr>
<td><button id="btnAddAlt" class="stdbutton" (click)="btnAddAlt_Click>Add">Add</button></td>
</tr>
<tr>
<td><button id="btnRemoveAlt" class="stdbutton" (click)="btnRemoveAlt_Click>Add">Remove</button></td>
</tr>
<tr>
<td><button id="btnAltClose" class="stdbutton" (click)="btnAltClose_Click>Add">Close</button></td>
</tr>
</table>
</div>
</p-dialog>

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

import { DatastorageService } from '../services/datastorage.service';
import { AdvpocketgridService } from '../services/advpocketgrid.service';

import { JobInfo } from '../models/jobInfo';
import { Material } from '../models/material';

import { TableModule } from 'primeng/table';
import { DialogModule } from 'primeng/dialog';
import { PriMaterial } from '../models/primaterial';
import { AltMaterial } from '../models/altmaterial';
import { elementAt } from 'rxjs/operator/elementAt';

type DictionaryItem = [string, AltMaterial[]]

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
jobInfo: JobInfo;
routingStepPass: Observable<any>;
pocketGrid: Material[];
priMaterial: PriMaterial[] = [];
selectedItem: PriMaterial;
cols: any[];
dicAltMaterial: Array<DictionaryItem> = [];
display: boolean = false;
altMaterial: AltMaterial[] = [];
selectedAltItem: AltMaterial;

constructor(private dataStorageService: DatastorageService,
private advPocketGridService: AdvpocketgridService) {
}

ngOnInit() {
this.jobInfo = this.dataStorageService.getJobInfo();
// alert(this.jobInfo.routingStepCode);
this.LoadPage();
}

private LoadPage(){
//if pass is zero, means that request came from shopterm, so PFTaskcode should not be null, I hope
if (this.jobInfo.pass == 0){
this.routingStepPass = this.advPocketGridService.GetRoutingstepCodePass("1.01-2-1473612",this.jobInfo.costCenter);
this.routingStepPass.subscribe(value =>
{this.jobInfo.routingStepCode = value.RoutingStepcode;
this.jobInfo.pass = value.Pass;
});
} else {

}

//get the pocket grid for job
this.advPocketGridService.GetPocketGridMaterial(this.jobInfo.job,this.jobInfo.cellVersion, this.jobInfo.routingStepCode, this.jobInfo.pass.toString())
.subscribe(pocketgridItems => {
this.pocketGrid = pocketgridItems;
this.pocketGrid.forEach(element => {
if (element.PrimaryItemSID == 0){
let matl = new PriMaterial();
matl.AddRemove = element.AddRemove;
matl.Id = element.Id;
matl.ItemNumber = element.ItemNumber;
matl.ItemType = element.ItemType;
matl.PrimacItemNumberSID = element.PrimacItemNoSID;
matl.ComponentAddRemoveSID = element.ComponentAddRemoveSID;

this.priMaterial.push(matl);
};
}
);
this.priMaterial.forEach(element =>{
let aMaterial: Material[] =this.pocketGrid.filter(x => x.PrimaryItemSID.toString() == element.PrimacItemNumberSID);
let altMaterial: AltMaterial[] = [];

aMaterial.forEach(element => {
let amatl = new AltMaterial();
amatl.AddRemove = element.AddRemove;
amatl.ItemNumber = element.ItemNumber;
amatl.ItemType = element.ItemType;
amatl.PrimacItemNumberSID = element.PrimacItemNoSID;
amatl.PrimaryItemSID = element.PrimaryItemSID;
amatl.CompPrimacAltSID = element.CompPrimacAltSID;

altMaterial.push(amatl);
});

if(altMaterial.length > 0){
// // this.dicAltMatl.add(element.PrimacItemNumberSID, altMaterial);
let di: DictionaryItem
di = [element.PrimacItemNumberSID, altMaterial];
// this.arrAltMaterial.push(altMaterial);
this.dicAltMaterial.push(di);
element.ItemNumber = element.ItemNumber + "*"
}
})
}


);


}

onRowSelect(event){
// alert(event.data.ItemNumber)
// alert(this.selectedItem.ItemNumber)
event.data.Selected = "X";

this.priMaterial.forEach(element => {
if(element.Id != event.data.Id)
{
element.Selected = "";
}
});
}

onRowUnselect(event){
event.data.Selected = "";
}

btnAltMaterial_Click(){
// alert("Edit Alt Material");
let altMtl: DictionaryItem = this.dicAltMaterial.find(x => x[0] == this.selectedItem.PrimacItemNumberSID);
// alert(this.selectedItem.PrimacItemNumberSID)
// alert(altMtl[1][0].ItemNumber)
this.altMaterial = altMtl[1];
this.display = true;
}

onRowAltSelect(event){
// alert(event.data.ItemNumber)
// alert(this.selectedItem.ItemNumber)
// event.data.Selected = "X";

this.altMaterial.forEach(element => {
if(element.PrimacItemNumberSID != event.data.PrimacItemNumberSID)
{
element.Selected = "";
}
});
}

}

@bubk
Please put your code inside a "code" block so people can read it?

Code in code block as requested, sorry first time posting to forum.

finally figured it out, case sensitive issue, when populating my column in my .html I had