Angular Select control ngFor is not working in table with results

Question

I have this dataset for a table:

I'm trying to populate a select control as part of html table with results.

This is what I'm trying to do:

<ng-container matColumnDef="PricingTemplatesList">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Margin Template</th>
            <td mat-cell *matCellDef="let customer">
                <select id="pricingtemplates">
                    <option [ngValue]="pricingTemplate.Oid" *ngFor="let pricingTemplate of customer.PricingTemplatesList">{{pricingTemplate.Name}}</option>
                </select>
            </td>
        </ng-container>

The result I'm getting is blank select control.

This is how the list items look like:

I'm even trying this {{customer.PricingTemplatesList.length}} to see if the items exist but I'm getting undefined, although when doing console.log(customer) as you can see I'm able to see the data.

Is there anything specific I need to do?

Answer 1

correction in your code . Use below code .

<ng-container matColumnDef="PricingTemplatesList">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Margin Template</th>
            <td mat-cell *matCellDef="let customer">
                <select id="pricingtemplates">
                    <option [ngValue]="pricingTemplate.Oid" *ngFor="let pricingTemplate of customer.pricingTemplatesList">{{pricingTemplate.name}}</option>
                </select>
            </td>
        </ng-container>

Replace pricingTemplate.Name with pricingTemplate.name .

And also replace in *ngFor customer.PricingTemplatesList with customer.pricingTemplatesList (capital P to lowerCase P).