-1

I have the p-table and this is what the structure looks like:

...
<p-tabPanel header="A">
      <a *ngIf="importedNewCustomer.length; else ErrorPage">
        <p-table
          #CutsomerList
          [value]="importedNewCustomer"
          [scrollable]="true"
          [(selection)]="selectedConfirmedNewCustomer"
        >
          <ng-template pTemplate="header" let-newCustomer>
            <tr>
              <th>
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                Select All
              </th>
              <th>Customer Name</th>
              <th>Age</th>
              <th>Phone Number</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-newCustomer>
            <tr>
              <td>
                <p-tableCheckbox [value]="newCustomer"></p-tableCheckbox>
              </td>
              <td>{{ newCustomer.Name }}</td>
              <td>{{ newCustomer.Age }}</td>
              <td>{{ newCustomer.PhoneNumber }}</td>
            </tr>
          </ng-template>
        </p-table>
      </a>
      <ng-template #ErrorPage>
        <h1>No New Customer</h1>
      </ng-template>
    </p-tabPanel>
...

And this is importedNewCustomer data

[
  {
      Name : "Jason",
      Age : 29,
      PhoneNumber: "111-222-3333",
      Level: "Secured"
  },
  {
      Name : "Smith",
      Age : 56,
      PhoneNumber: "222-333-4444",
      Level: "Secured"
  },
  {
      Name : "Jackson",
      Age : 18,
      PhoneNumber: "333-444-5555",
      Level: "Secured"
  }
]

This is the action I expect from users.

  1. Users drop down their files to import customer data.
  2. The imported data has all either "Secured" or "NotSecured" only.
  3. The above data has all "Secured".
  4. When clicking on the "import" button, I want to make the PhoneNumber column unshown(hidden) because the Level is "Secured".

This is my try:

.
.
.
          <ng-template pTemplate="header" let-newCustomer>
            <tr>
              <th>
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                Select All
              </th>
              <th>Customer Name</th>
              <th>Age</th>
              <th *ngIf="newCustomer.Level === 'Secured'">Phone Number</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-newCustomer>
            <tr>
              <td>
                <p-tableCheckbox [value]="newCustomer"></p-tableCheckbox>
              </td>
              <td>{{ newCustomer.Name }}</td>
              <td>{{ newCustomer.Age }}</td>
              <td *ngIf="newCustomer.Level === 'Secured'">{{ newCustomer.PhoneNumber }}</td>
            </tr>
          </ng-template>
.
.
.

However, when the user drops down the file and clicks on the "Import" button, they face this error in console:

ERROR TypeError: Cannot read properties of undefined (reading 'Level')

I don't understand the error because the Level is defined clearly..

Any ideas, please?

JBC
  • 33
  • 5
  • Can you try to set `{{newCustomer | json}}` anywhere in your table and remove the if statements to verify that the object is bound properly? It seems like the object `newCustomer` is undefined. – Fabian Strathaus Oct 24 '22 at 14:11
  • I coded `{{ newCustomer | json }}` and could see the json data defined in ``. The Level is defined and the value is displayed as expected in ``. However, my question is how to display the value in `` under a particular condition. Any ideas, please? – JBC Oct 24 '22 at 18:10
  • you already ask in https://stackoverflow.com/questions/74185352/how-to-hide-p-dropdown-in-p-table-header-under-a-particular-condition/74187289#74187289 I think you're not exposing well your problem and why you need that – Luca Angrisani Oct 25 '22 at 14:05

1 Answers1

1

You can probably solve all your problems by simply making sure newCustomer is defined. Change your if to this:

<td *ngIf="newCustomer && newCustomer.Level === 'Secured'">

or better yet, add it at the table level:

<p-table *ngIf="newCustomer">
Rick
  • 1,710
  • 8
  • 17
  • All values in `` are shown as expected. However, I want to show or hide the value in `` (i.e the string, "Phone Number") under a particular condition. Happy to have any advice! – JBC Oct 24 '22 at 18:12
  • do the same thing for th `` – Rick Oct 24 '22 at 21:53
  • just try my recommendation and you may be amazed by what happens. – Rick Jun 27 '23 at 15:34