时间戳

首页 > 解决方案 > 更改检测不适用于禁用的选择

angular - 更改检测不适用于禁用的选择

问题描述

我有两个下拉列表。在第一个下拉列表的条件下，我想禁用第二个。但它不起作用。所以最初 isTheFirstDropdownSelected 布尔变量为真，所以第二个下拉列表被禁用，当第一个下拉列表被选中并且它的功能被称为我正在将 isTheFirstDropdownSelected 变量更改为 true，但第二个选择仍处于禁用状态。我的错误在哪里

 <div class="row">
        <div class="match-choosing-dropdown">
          <select id="dropdown-match-picker" [formControl]="control" (change)="navigateToSection('match-info-section')"
            (ngModelChange)="selectedMatchHandler($event)">
            <option *ngFor="let match of matches; let i = index" [ngValue]="match">{{match.home_team_name}} VS
              {{match.away_team_name}}</option>
          </select>
        </div>
       </div>

       <div class="row">
        <div class="match-choosing-dropdown">
          <select [attr.disabled]="isTheFirstDropdownSelected" [formControl]="control" (change)="navigateToSection('match-info-section')"
            (ngModelChange)="selectedBetOptionHandler($event)" >
            <option>Select</option>
            <option *ngFor="let option of betOptionNames; let i = index" [ngValue]="option">{{option.name}}</option>
          </select>
        </div>
       </div>


isTheFirstDropdownSelected = true;
 selectedMatchHandler(selectedMatch): void {
    this.isTheFirstDropdownSelected= false;
}

标签： angular

解决方案

尝试这个

 selectedMatchHandler(selectedMatch): void {
    this.isTheFirstDropdownSelected= null; // assign null value 
}

--- 如果上述方法不起作用，那么您正在使用响应式表单尝试使用：响应式方式来启用字段

 this.secondDropdownControlName.enable();

推荐阅读