Question

我有一个现有的数据库，可以使用item.schoolName进行提取并填充下拉菜单。当我访问此“候选人表格”时，它特定于候选人去过的活动和学校。知道这一点后，我应该能够使用该表格所属的学校的名称预先填充下拉列表，而不用让候选人选择。我希望学校的名称能够像在选择任何单击之前已经选择的那样预先填充，并且希望下拉列表在需要更改的情况下仍然可用。

您会在我包含的代码中看到我尝试过{{getSchoolById(mylocalEvent.schoolId)}}的方法，该方法实际上有效，并返回事件对应的学校的名称。但是，如果将其粘贴到<mat-select [(value)] = 'mylocalEvent.schoolId'中，则会收到错误消息，而不是预期的预先填充的学校。

<td>
    {{ getSchoolById(mylocalEvent.schoolId) }}
    <mat-form-field>
        <mat-label>Schools</mat-label>
        <mat-select [(value)]="mylocalEvent.schoolId" required id="school" formControlName="school">
            <mat-option [value]="item.schoolId" id="schoolOptions" *ngFor="let item of schoolSource">
                {{ item.schoolName }}
            </mat-option>
        </mat-select><!-- End of mat-select -->
    </mat-form-field><!-- End of mat-form-field -->
</td><!-- End of td -->

我希望下拉菜单中会预先填入相应活动的学校名称。

Answer 1

您使用的是反应形式，所以不要使用[(value)]，angular并不关心它，只关心表单控件。因此，请在初始化时将值设置为表单控件：

this.myForm = this.formBuilder.group({
  school: [this.mylocalEvent.schoolId],
});

和模板应该仅具有表单控件名称，而不是值：

<mat-select formControlName="school">

演示：StackBlitz

或者如果以后得到值，请使用this.myForm.get('school').setValue('value here!')

如何使用现有数据库预填充下拉菜单

2 个答案: