Angular 8根据字符串在下拉列表中设置所选值

Question

我有此代码：

  <ng-container matColumnDef="pricingTemplateId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Margin</th>
            <td mat-cell *matCellDef="let customer">
                {{customer.pricingTemplateName}}
            </td>
        </ng-container>

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

对于select控件，我将附加对象数组，如下面的屏幕截图所示：

现在，我在模型中还有另一个字符串值，希望在下拉列表中基于该字符串值。

当我执行[(ngModel)]="customer.pricingTemplateName"（基本上是一个字符串）时，我收到此消息“没有用于未指定名称属性的表单控件的值访问器”

没有ngModel属性，我可以在下拉列表中列出所有模板名称，但是我是否需要做一些更改才能基于字符串设置所选值？

Answer 1

使用compareWith 检查链接 https://netbasal.com/understanding-the-comparefn-input-in-angular-v4-4a401ef4fc4c

Answer 2

您正在与[(ngModel)]上的<option>执行2种方式的数据绑定。这将需要继续进行<select>，然后您可以在ngFor循环内设置选项[value]="pricingTemplate.name"，这将被select元素拾取。

<select id="pricingtemplates" name="ddlPricingTemplate" [(ngModel)]="customer.pricingTemplateName">
   <option *ngFor="let pricingTemplate of customer.pricingTemplatesList" [value]="pricingTemplate.name">
     {{pricingTemplate.name}}
   </option>
</select>