Angular8 下拉值不绑定页面加载

Question

我有一个位置下拉菜单，其选项来自 api 结果。如果之前已经保存了值，我有一个模型。

            <select id="location" [(ngModel)]="location" name="location">
              <option value="">Select Location </option>                  
              <option *ngFor="let data of locationType" [ngValue]="data.locationId">{{data.locationValue}}</option>                  
           </select>

我在ngOnInit上设置位置模型，存储的值是用户登录时的位置存储

this.location=localStorage.locationId;

加载页面时，模型会填充到下拉列表中，尽管模型具有 locationId，只有在页面上多次单击后才会绑定

我无法理解这种行为，为什么会这样，任何输入都会有所帮助。

Answer 1

如果 locationId 类型是 Number 那么你需要在从 localStorage 读取时转换它，因为它总是 returns string.

this.location=localStorage.locationId ? parseInt(localStorage.locationId, 10) : null;

Answer 2

正如我在评论中所写，当使用字符串作为选项值时，您应该使用 value 而不是 ngValue

Angular8 下拉值不绑定页面加载

Angular8 dropdown value not binding on page load

angular

angular8