*ngIf 带按钮，禁用或未禁用 Angular 9

Question

我有两个下拉菜单，它们是Retrieve单击按钮时调用的函数的参数。我想要发生的是当两个下拉菜单都没有选择数据时，Retrieve按钮被禁用。如果两个下拉菜单都有数据，那么我希望按钮正常运行。这是我当前的 html：

<div class="dropdown">
  <div class="input-group">
    <h4 class="sessionText">Session: </h4>
    <select [(ngModel)]='sessionReportFilter.sessionName'
            class="custom-select form-control-sm"
            (change)='sessionDataChange($event)'
            id="inputGroupSelect01">
      <option [value]="null">Select session...</option>
      <option *ngFor="let session of sessionData" [value]='session.sessionName'>
        {{session.sessionName}}
      </option>
    </select>
  </div>

  <div class="input-group">
    <h4 class="reportText">Report Date: </h4>
    <select [(ngModel)]='sessionReportFilter.fileName' *ngIf='currentSession' class="custom-select form-control-sm" id="inputGroupSelect01">
      <option [value]="null">Select report...</option>
      <option *ngFor="let report of currentSession.reportFiles"
              [value]="report">
        {{report}}
      </option>
    </select>
    <select *ngIf="currentSession === null" class="custom-select form-control-sm" id="inputGroupSelect01"></select>
  </div>
  <div>
    <button type="button" class="btn btn-primary" disabled="disabled">Retrieve</button>
    <button type="button" class="btn btn-primary" (click)="orderExceptionReportData()">Retrieve</button>
  </div>
</div>

我怎样才能达到预期的结果？

Answer 1

[disabled]="!sessionReportFilter.fileName && !sessionReportFilter.sessionName"

当至少一个下拉菜单没有值时，替换您想要禁用按钮的位置，

所以

<button type="button" class="btn btn-primary" disabled="disabled">Retrieve</button>

将是

<button type="button" class="btn btn-primary" [disabled]="!sessionReportFilter.fileName && !sessionReportFilter.sessionName">Retrieve</button>