Question

因此，在从Angular 2迁移我的洞项目后> Angular 5，我注意到select上有一种奇怪的行为。

我有几个select调用web服务来加载他们的数据。

<select class="form-control" [(ngModel)]="viewName">
     <option [ngValue]="null"></option><option *ngFor="let value of viewnames" [ngValue]="value">
          {{value}}
     </option>
</select>

第一次调用Web服务时，没有问题，默认情况下没有选择任何内容，select为空，下拉列表显示元素列表。

现在，当我第二次调用Web服务时，默认情况下没有选择任何内容，但是select显示列表的第一个元素，下拉列表显示元素列表。

我坚持认为，即使显示第一个元素，也不会选中它（ngModel为空）。

在调用Web服务之前清空列表，确实解决了问题，但由于我有超过100个Web服务要检查，我想知道是否有更好的方法来解决问题

//This fixes the issue
let viewnames = [];
this.service.getViewNames().subscribe(...)

有没有更好的方法来解决这个问题？

编辑：经过几个小时的调试，并且（感谢Pierre Mallet）尝试重现StackBlitz上的错误，似乎问题是由BrowserAnimationsModule造成的。

Demo

任何建议都将不胜感激

Answer 1

所以这似乎是BrowserAnimationsModule：https://github.com/angular/angular/issues/18430

的错误

如果你不使用动画，你可以删除模块，你应该没事。如果您正在使用它们（或使用正在使用它们的模块），那么简单的解决方法就是将animations: [trigger('',[])]添加到您的组件中。

@Component({
  animations: [trigger('', [])],
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

选择下拉列表显示未选中的元素

1 个答案: