@SourceCorrect1 Thank you for reporting this problem, we will take a closer look at that.

As a workaround for now you would need to modify this value to lower case both in the Person object and headers array.

Edit:

We haven't had a chance to check it more precisely yet, but given the use case mentioned by the @adamgusky, I'm not sure if we'll be able to find one solution that will solve all similar problems. Header name will often contain capital letters, spaces, special signs etc. and it would be impossible to have an object property that is exactly the same as header name in such cases.

I think that in this case it would be better to use a list of objects with value/label pairs. Here is an example from our Admin Dashboard project:

HTML:

            <thead class="datatable-header">
              <tr>
                <th
                  *ngFor="let header of headers"
                  [mdbTableSortHeader]="header.value"
                  scope="col"
                >
                  {{ header.label }}
                </th>
              </tr>
            </thead>

TS:

interface Product {
  productId: number;
  quantity: number;
  purchases: number;
  delta: number;
}

  headers = [
    { value: 'productId', label: 'Product ID' },
    { value: 'quantity', label: 'Quantity' },
    { value: 'purchases', label: 'Purchases' },
    { value: 'delta', label: 'Δ' },
  ];