Question

在我的应用程序中有一个select-dropdown，它根据另一个输入字段的值动态更改它提供的选项。

（基本上我可以在用户点击按钮时删除其中一个选项。）

如果用户尚未在下拉列表中选择任何内容，则应保持为空。但是，只要我以编程方式删除其中一个选项，第一个选项就会显示为所选选项

这是有缺陷的plunkr，点击按钮时显示选项“1”： https://plnkr.co/edit/ayzM2HNtO6Hkkr8jkgVA?p=preview

现在，我确实找到了导致此行为的原因：删除 BrowserAnimationsModule 的导入将使select-dropdown正常运行，而不会在单击按钮时更改其选择：

T 他是工作人员： https://plnkr.co/edit/dPDpEQm14pWlFNfLe4nP?p=preview

现在我的问题：这是一个错误吗？ BrowserAnimationsModule不应该导致select-inputs改变它们的行为吗？

这是工作源代码（从模块中的导入中删除了BrowserAnimationsModule）

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button type="button" (click)="doFilter();">click me</button>

      <form [formGroup]="myForm">
        <select formControlName="dropdown">
          <option *ngFor="let item of items" [value]="item">{{item}}</option>
        </select>

      </form>

    </div>
  `,
})
export class App {
  name:string;
  constructor(
    private fb: FormBuilder
    ) {
    this.items = [1,2,3,4,5,6];

    this.myForm = this.fb.group({
      dropdown: ''
    });
  }

  private doFilter() {
      this.items = [1,2,3,4,5];
  }

}

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

选项出现在未触动的选择输入中

0 个答案: