Angular Select 控件 ngFor 在 table 中无法正常工作并显示结果

Question

我有一个 table 的数据集：

我正在尝试使用结果填充 select 控件作为 html table 的一部分。

这就是我想要做的：

<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>

我得到的结果是空白 select 控件。

列表项如下所示：

我什至正在尝试这个{{customer.PricingTemplatesList.length}}来查看这些项目是否存在，但我变得不确定，尽管在做 console.log(customer) 时你可以看到我'我能够看到数据。

我有什么具体需要做的吗？

Answer 1

更正您的代码。使用下面的代码。

<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>

将 pricingTemplate.Name 替换为 pricingTemplate.name 。

并且也将 *ngFor customer.PricingTemplatesList 替换为 customer.pricingTemplatesList（大写 P 为小写 P）。

Angular Select 控件 ngFor 在 table 中无法正常工作并显示结果

Angular Select control ngFor is not working in table with results

angular

angular-material

angular-ngfor