即使選擇了一個值，下拉菜單仍然被禁用

Question

有兩個下拉按鈕 d1 和 d2。 d2 被禁用。 從“d1”中選擇一個值后，“d2”仍然被禁用。

<div class="card-container">
        <label>Country</label>
        <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
            <option>--Choose Country--</option>
            <option *ngFor="let country of Countries" >{{country.name}}</option>
        </select>
    </div>

    <div class="card-container">
        <label>State</label>
        <select placeholder="State" (change)="changeState($event)"
      [disabled]="selectedCountry">
            <option>--Choose State--</option>
            <option *ngFor="let state of states">{{state.name}}</option>
        </select>
    </div>

使用 [disabled]="selectedCountry" d2 被禁用，但如果 [disabled]=".selectedCountry" 我想讓 d2 只有在選擇 d1 時才可選。

Answer 1

[disabled]="selectedCountry"意味着如果你有一些selectedCountry的值，它將是true ，這意味着它被禁用。 所以條件應該是相反的

[disabled]="!selectedCountry"

如果selectedCountry沒有任何值，將使其禁用。

<div class="card-container">
  <label>Country</label>
  <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
    <option>--Choose Country--</option>
    <option *ngFor="let country of Countries" >{{country.name}}</option>
  </select>
</div>

<div class="card-container">
  <label>State</label>
  <select placeholder="State" (change)="changeState($event)" [disabled]="!selectedCountry">
    <option>--Choose State--</option>
    <option *ngFor="let state of states">{{state.name}}</option>
  </select>
</div>

還要確保 selectedCountry 的初始值是selectedCountry selectedCountry = ''