Angular Input/Edit Form – populating input fields but not table (primeNG)

  angular, primeng, primeng-datatable

I have an edit form and a table where the details of the employees should populate. The input fields populate with all the field data in the URL (not what I want) and the table is not populating at all. Any help, suggestions would be greatly appreciated. I am using PrimeNG.

This is the employeedata.service.ts

    import { Injectable, PipeTransform } from '@angular/core'; 
import { DecimalPipe } from '@angular/common'; 
import { HttpClient, HttpHeaders } from '@angular/common/http';


import { catchError, debounceTime, delay, switchMap, tap, map } from 'rxjs/operators';
import { BehaviorSubject, Observable, of, Subject, throwError } from 'rxjs';  

export interface WebEmployeeDetail {
    PeopleId: number;
    LastName: string;
    FirstName: string;
    EmployeeId: string;
    EmployeeAltId: string;
    CompanyName: string;
    LocationName: string;
    Occupation: string;
    RegMode: string;
    CompanyAn: number;
    LocationAn: number;
    User1: string;
    User2: string;
    User3: string;
    User4: string;
    User5: string;
    User6: string;
    User7: string;
    User8: string;
    Term: string;
    TermDate: Date | string | null;
    DOB: Date | string | null;
    Inactive: string;
    OccupationCode: string;
    InactiveDate: Date | string | null;
    CompanyLocationId: string;
    CompanyId: number;
    LocationId: number;
    EmployeeCategory: string;
    Gender: string;
    HomePhone: string;
    WorkPhone: string;
    Address: string;
    Address2: string;
    City: string;
    State: string;
    ZipCode: string;
    Country: string;
    HireDate: Date | string | null;
    IsSupervisor: boolean;
    Supervisor: string;
    MasterAccount: string;
    FAA: boolean;
    FHWA: boolean;
    FRA: boolean;
    FTA: boolean;
    RSPA: boolean;
    USCG: boolean;
    FMCSA: boolean;
    LabId: string;
    ReviewByMro: boolean;
    ReviewByMroNegative: boolean;
    Password: string;
}

export interface WebEmployeeListItem{
  PeopleId: number;
  LastName: string;
  FirstName: string;
  EmployeeId: string;
  EmployeeAltID: string;
  AltID: string;
  CompanyName: string;
  LocationName: string;
  Occupation: string;
  RegMode: string;
  CompanyAn: number;
  LocationAn: number;
  User1: string;
  User2: string;
  User3: string;
  User4: string;
  User5: string;
  User6: string;
  User7: string;
  User8: string;
  Term: string;
  TermDate: string;
  DOB: string;
  Inactive: string;
  OccupationCode: string;
}

@Injectable({
  providedIn: 'root'
})

export class EmployeeService {

  //API
  constructor(private http: HttpClient) {}
  private baseUrl = 'https://localhost:44384/apps/clientportal/employee';
  private baseUrlid = 'https://localhost:44384/apps/clientportal/employee/employee';

    //Getting ALL Recods from API
    getEmployeesBy(email: string, password: string): Observable<WebEmployeeListItem[]> {
      console.log('Getting All Employees from Server.')
      const webparams = {Email: email, Password: password}; 
      const employees = this.http.post<WebEmployeeListItem[]>(this.baseUrl, webparams)
      return employees;
    }
    //Getting recods by EmployeeID
    getEmployeesByID(EmployeeId: string, email: string, password: string): Observable<WebEmployeeDetail> {
      console.log('Getting the Employee by ID.')
      const webparams = {EmployeeId: EmployeeId, Email: email, Password: password}; 
      return this.http.post<WebEmployeeDetail>(`${this.baseUrlid}`, webparams)
    }
}

This is the the edit.component.ts:

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.scss'],
  providers: [MessageService, ManageComponent]
})
export class EditComponent implements OnInit {

  constructor(private route: ActivatedRoute, 
              private messageService: MessageService,
              private EmployeeService: EmployeeService,
              private primengConfig: PrimeNGConfig) {}

  selectedEmployee: WebEmployeeDetail;
  selectedEmployee$: WebEmployeeDetail[];

  cols: any[];
  totalRecords: number;
  loading: boolean;
 
  activityValues: number[] = [0, 100];

  items: MenuItem[];
  home: MenuItem;
  errorMessage: string;

  ngOnInit() {
    
    let EmployeeId = (this.route.snapshot.params['EmployeeId']);
    this.EmployeeService.getEmployeesByID(EmployeeId, 'BlankUsername', 'AnyPassword')
    .subscribe ({
        next: ( selectedEmployee$: WebEmployeeDetail) => this.selectedEmployee = selectedEmployee$,
        error: err => this.errorMessage = err
    });

this is the view or edit.component.html

<p-breadcrumb [model]="items" [home]="home"></p-breadcrumb>

<h4 class="p-text-bold-grey">EDIT EMPLOYEE</h4>

<!-- EMPLOYEE INFORMATION BOX -->

<div class="p-grid">
    <div class="p-col">
        <div class="box">        
                <div class="p-fluid p-formgrid p-grid">
                    <div class="p-field p-col-12 p-md-6">
                        <label for="FirstName">First Name</label>
                        <input id="FirstName" type="text" pInputText placeholder="First Name" name="FirstName" [(ngModel)]="selectedEmployee && selectedEmployee.FirstName"> 
                    </div>
                    <div class="p-field p-col-12 p-md-6">
                        <label for="lastname">Lastname</label>
                        <input id="lastname" type="text" pInputText placeholder="Last Name" name="LastName" [(ngModel)]="selectedEmployee && selectedEmployee.LastName"> 
                    </div>
                    <div class="p-field p-col-12">
                        <label for="address">Address</label>
                        <input id="address" type="text" pInputText placeholder="Address" name="Address" [(ngModel)]="selectedEmployee && selectedEmployee.EmployeeId"> 
                    </div>
                    <div class="p-field p-col-12 p-md-6">
                        <label for="city">City</label>
                        <input id="city" type="text" pInputText placeholder="City" name="City" [(ngModel)]="selectedEmployee && selectedEmployee.RegMode"> 
                    </div>
                    <div class="p-field p-col-12 p-md-3">
                        <label for="state">State</label>
                        <input id="state" type="text" pInputText placeholder="State" name="State" [(ngModel)]="selectedEmployee && selectedEmployee.Occupation"> 
                    </div>
                    <!-- <div class="p-field p-col-12 p-md-3">
                        <label for="zip">Zip</label>
                        <input id="zip" type="text" pInputText> 
                    </div> -->
                </div>
            
            <!--BUTTON DIV-->
            <div>
                <p-button label="Submit" icon="pi pi-check"></p-button>
            </div>
            <!--END BUTTON DIV-->
        </div>
    </div>


    <!-- BIG BLUE ACTION BUTTONS BOX-->
    <div class="p-col">
        <div class="box">
            <div class="p-md-12">
                <button pButton type="button" label="Schedule a collection test" class="p-button-lgw"></button>
            </div>
            <div class="p-col-12 p-md-12">
                <button pButton type="button" label="Schedule a physical" class="p-button-lgw"></button>
            </div>
            <div class="p-col-12 p-md-12">
                <button pButton type="button" label="Download testing report" class="p-button-lgw"></button>
            </div>
            <div class="p-col-12 p-md-12">
                <button pButton type="button" label="Re-Hire/Terminate Employee" class="p-button-lgw"></button>
            </div>
        </div>
    </div>
</div>

<!-- TABLE BEGINS HERE -->
<div class="box p-d-flex p-mb-3 p-mt-4">
    <p-table dataKey="EmployeeId" styleClass="p-datatable-striped p-datatable-gridlines" [value]="selectedEmployee$">
    
    <!-- TABLE HEADER BEGINS -->
        <ng-template pTemplate="header">
            <tr>
                <th style="width: 10%;">ACTIONS</th>
                <th style="width: 10%;">Employee ID</th>
                <th pSortableColumn="TestNumber">Test Number <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="CollectionDate">Collection Date <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="ClinicName">Clinic Name <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="Reason">Reason <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="Method">Method <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="Status">Current Status <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="Result">Result <p-sortIcon field=""></p-sortIcon></th>
                <th pSortableColumn="ResultDate">Result Date <p-sortIcon field=""></p-sortIcon></th>
                
            </tr>
           
        </ng-template>

        <!-- TABLE BODY BEGINS HERE -->
        <ng-template pTemplate="body" let-selectedEmployee$>
            <tr>
                <td style="text-align:LEFT">
                    <button type="button" pRipple pButton icon="pi pi-file" pTooltip="VIEW RESULTS" tooltipPosition="top"
                    class="p-button-text"></button>
    
                    <button type="button" pRipple pButton icon="pi pi-id-card" pTooltip="VIEW T.A.S." tooltipPosition="top"
                    class=" p-button-text p-button-secondary"></button>
    
                    <button type="button" pRipple pButton icon="pi pi-book" pTooltip="VIEW C.O.C." tooltipPosition="top" (click)="showDeletedEmployee()"
                    class="p-button-text p-button-danger"></button>
                </td>
                <td>{{selectedEmployee$.PeopleId}}</td>
                <td>{{selectedEmployee$.EmployeeId}}</td>
                <td>{{selectedEmployee$.EmployeeAltId}}</td>
                <td>{{selectedEmployee.CompanyName}}</td>
                <td>{{selectedEmployee.LocationName}}</td>
                <td>{{selectedEmployee.RegMode}}</td>
                <td>{{selectedEmployee.Occupation}}</td>
                <td>{{selectedEmployee.Inatctive}}</td>
                <td>{{selectedEmployee.OccupationCode}}</td>
                
            </tr>
        </ng-template>
  </p-table>
</div>

AND… the button with (click) is coming from the homepage component… and this is the code I have for it:

@Component({
  selector: 'app-manage-data',
  templateUrl: './manage.component.html',
  styleUrls: ['./manage.component.scss'],
  providers: [MessageService]
})



export class ManageComponent implements OnInit {

  employees: WebEmployeeListItem[];
  employees$: Observable<WebEmployeeListItem[]>;

  selectedEmployee: WebEmployeeDetail[];
  selectedEmployee$: Observable<WebEmployeeDetail[]>;

constructor(private messageService: MessageService, private EmployeeService: EmployeeService, private primengConfig: PrimeNGConfig,
     private router: Router) {

  }

  ngOnInit() {

 //ROUTING FOR EDIT EMPLOYEE BUTTON
        editEmployee(selectedEmployee$: WebEmployeeDetail) {
          console.log("Got EmployeeID:" + selectedEmployee$.EmployeeId)
          this.EmployeeService.getEmployeesByID(selectedEmployee$.EmployeeId,'AnyUsername', 'AnyPassword');
          console.log("Still Have EmployeeID:" + selectedEmployee$.EmployeeId)
          this.router.navigate(['/edit', selectedEmployee$]);
        }

}

BUTTON HTML:

   <button type="button" (click)="editEmployee(employees)" pButton icon="pi pi-pencil" pTooltip="EDIT EMPLOYEE" tooltipPosition="top"
                    class=" p-button-text p-button-secondary"></button>

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.