html - 在 Angular 7 中，下拉菜单的默认选择值并不直接

Question

我最近一直在使用 Angular 7，并在尝试显示下拉列表并在此列表中显示默认值时发现了一些奇怪的事情。这里分别是两个单独的列表：

示例.component.html

 <select [(ngModel)]="organization" id="organization" required>
          <option *ngFor="let organization of organizations" [value]="organization.id" [ngValue]="organization.name">{{organization.name}}</option>
        </select>
        <br>

我发现上面的代码在我的浏览器中显示了以下内容：

注意上面的默认值是如何设置的，但是在下一个下拉菜单中没有设置默认值：

示例.component.html

<select [(ngModel)]="seniorExperience" id="seniorExperience" required>
          <option *ngFor="let seniorExperience of seniorExperiences" [value]="seniorExperience.seniorExperienceId" [ngValue]="seniorExperience.seniorExperienceName">{{seniorExperience.seniorExperienceName}}</option>
        </select>

浏览器显示以下内容：

为什么第二个下拉列表没有填充默认值，同时遵循相同的语法？通过搜索和阅读文档，我推测 [ngValue] 设置了下拉列表的默认值，这似乎适用于第一个下拉列表。有没有更好的方法来设置默认选择？

标签： htmlangulartypescriptangular7

Answer 1

根据 Angular 7 实现：

在 HTML 中：

<select *ngIf="ownerLevels" [value]="selectedOwnerLevel" (change)="onChangeOwnerLevel($event.target.value)" formControlName="ownerLevel" id="ddOwnerLevel">
   <option [value]="0" disabled>Select Owner Level</option>
   <option *ngFor="let ownerLevel of ownerLevels" [value]="ownerLevel.id">{{ownerLevel.name}}</option>
</select>

在 TS 中：

ownerLevels = [
   { id: 1, name: 'Company' },
   { id: 2, name: 'Department' },
   { id: 3, name: 'Personal Area' }
];

selectedOwnerLevel: number = 0;

onChangeOwnerLevel(ownerLevelId: number) {
   this.selectedOwnerLevel = ownerLevelId;
}