Question

I have this working snippet，哪个控制台将从下拉菜单中记录所选值。问题是，如果我选择第一个选项（已选择的Missing Promo），它将不会“触发” onChangeProblem函数。我该如何解决？谢谢您的时间！

Answer 1

这是因为第一个选项默认情况下处于选中状态，但未更改。

change事件仅在所选选项发生更改时才会触发。

您应该这样更改模板：

<select (change)="onChangeProblem($event)">
    <option disabled value="null">Select an Option</option>
    <option *ngFor="let problemStatement of problemStatementArray" [value]="problemStatement">
        {{problemStatement}}
    </option>
</select>

由于将有一个占位符文本，因此选择了一个选项，change事件将触发，使更改处理程序运行。

这是理想的实现方式。

这是您推荐的Sample StackBlitz。

Answer 2

我认为在呈现html之后，您无法执行任何操作来强制select记录其状态。很好，您可以做到这一点，但这会很hacky：）

您应该以编程方式控制选择值，并在组件初始化期间使用ngOnInit方法从数组记录其值。这是非常基本的实现：https://stackblitz.com/edit/angular-p2jqeg

关键代码段：

  chosenProblem: string;

  ngOnInit() {
    this.chosenProblem = this.problemStatementArray[0];
    this.logChosenProblem();
  }

  public onChangeProblem(event): void {
    this.chosenProblem = event.target.value;
    this.logChosenProblem();
  }

  logChosenProblem() {
    console.log(this.chosenProblem);
  }

<select
  (change)="onChangeProblem($event)"
  [value]="chosenProblem">
  <option
    *ngFor="let problemStatement of problemStatementArray"
    [value]="problemStatement">
    {{problemStatement}}
    </option>
</select>

选择选项不会“触发”第一个值

2 个答案: