Question

当我尝试禁用数据表中的按钮时遇到问题。我解释说，我的数据表中有我的客户的所有预约，并且有一个“取消”按钮，我想在预约日期过去时将此按钮传递给“禁用”。

我只能通过一个，其余的不能被禁用

component.html：

Sub tgr()

    Dim ws As Worksheet
    Dim aHeaders As Variant

    aHeaders = Array("PRECID", "PACCT", "PEXCH", "PFC", "PSUBTY", "PSTRIK", "PCTYM", "PSBCUS", "PBS", "PQTY", "PPRTCP")

    For Each ws In ActiveWorkbook.Sheets
        Select Case ws.Name
            'any worksheet names listed here won't have their headers updated
            Case "NoUpdate", "Leave Alone"
                'Do nothing

            'Update headers for all other sheets
            Case Else
                ws.Range("A1").Resize(, UBound(aHeaders) - LBound(aHeaders) + 1).Value = aHeaders
        End Select
    Next ws

End Sub

component.ts：

  <section id="general-section">
  <div id="custom-stepper">
    <form (ngSubmit)="buyBooking($event)" [formGroup]="bookingFormGroup">
      <mat-horizontal-stepper class="booking-stepper" linear>
        <mat-step [stepControl]="coachIdControl">
          <div class="container">
            <h4>Sélectionnez un coach</h4>
            <div class="row" *ngIf="coachesList">
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                <mat-form-field>
                  <mat-spinner value="accent" *ngIf="isLoading"></mat-spinner>
                  <mat-select formControlName="coachId">
                    <mat-option *ngFor="let coach of coachesList" value="{{coach.id}}">{{ coach.User.first_name }} {{ coach.User.last_name }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <mat-error *ngIf="bookingFormGroup.get('coachId').hasError('required')">Champ requis.</mat-error>
              </div>
              <mat-divider class="col-xs-1 col-sm-1 col-md-1 col-lg-1" [vertical]="true"></mat-divider>
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                <p>Sélectionnez le coach désiré dans la liste</p>
              </div>
            </div>
            <div class="row">
              <div id="stepper-btn" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button mat-raised-button color="accent" matStepperNext type="button">Suivant</button>
              </div>
            </div>
          </div>
        </mat-step>
        <mat-step [stepControl]="dateControl && timeControl">
          <div class="container">
            <div class="row">
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                <h4>Sélectionnez une date</h4>
                <mat-form-field>
                  <input matInput readonly [min]="minDate" [max]="maxDate" [matDatepicker]="myDatepicker" [matDatepickerFilter]="filterUnavailableDates"
                    (dateInput)="getAvailableHours()" (dateChange)="getAvailableHours()" formControlName="date">
                  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
                  <mat-datepicker touchUi #myDatepicker></mat-datepicker>
                  <mat-error *ngIf="bookingFormGroup.get('date').hasError('required')">Champ requis.</mat-error>
                </mat-form-field>
              </div>
              <mat-divider class="col-xs-1 col-sm-1 col-md-1 col-lg-1" [vertical]="true"></mat-divider>
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" *ngIf="availableHours">
                <h4>Heures disponibles</h4>
                <mat-error *ngIf="availableHours.length === 0">Aucune heures disponibles, veuillez sélectionner une autre date.</mat-error>
                <mat-spinner value="accent" *ngIf="isLoading"></mat-spinner>
                <mat-radio-group *ngFor="let time of availableHours;  let i = index" formControlName="time" required>
                  <mat-radio-button class="checkTime-btn" [checked]="selected === i" (change)="selected = i" value="{{time}}">{{ time }} - {{ time + 1 }} h.</mat-radio-button>
                </mat-radio-group>
                <mat-error *ngIf="bookingFormGroup.get('time').hasError('required')">Champ requis.</mat-error>
              </div>
            </div>
            <div class="row">
              <div id="stepper-btn" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button mat-raised-button color="accent" matStepperPrevious type="button">Retour</button>
                <button mat-raised-button color="accent" matStepperNext type="button">Suivant</button>
              </div>
            </div>
          </div>
        </mat-step>
        <mat-step>
          <div class="container">
            <div class="row">
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                <!-- TODO : AJOUTER CARD ANGULAR MATERIAL -->
                <mat-spinner value="accent" *ngIf="isLoading"></mat-spinner>
                <h4>Détails</h4>
                <p *ngIf="coach">Coach: {{ coach.User.first_name }} {{ coach.User.last_name }}</p>
                <p>Date: {{ dateStripe | date: 'dd/MM/yyyy' }}</p>
                <p>Heure: {{ timeStripe }} h.</p>
                <p *ngIf="coach">Prix: {{ coach.price }} €</p>
              </div>
              <mat-divider class="col-xs-1 col-sm-1 col-md-1 col-lg-1" [vertical]="true"></mat-divider>
              <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                <h4>Paiement et confirmation</h4>
                <ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions"></ngx-stripe-card>
                <mat-checkbox formControlName="confirm" (change)="disableConfirmation()">J'accepte</mat-checkbox>
                <mat-error *ngIf="bookingFormGroup.get('confirm').hasError('required')">Champ requis.</mat-error>
              </div>
            </div>
            <div class="row">
              <div id="stepper-btn" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button mat-raised-button color="accent" matStepperPrevious type="button">Retour</button>
                <button mat-raised-button color="accent" type="submit" [disabled]="!disableConfirm">
                  Confirmer la réservation
                </button>
              </div>
            </div>
          </div>
          <div>
          </div>
        </mat-step>
      </mat-horizontal-stepper>
    </form>
  </div>
</section>

这是数据表：

谢谢！

Answer 1

如果您想从ts禁用按钮

使用ViewChild获取对输入元素的引用

@ViewChild('ref') btn;

 disAble(ref){
   //If you want to set disable set the value to true
    this.btn._disabled=true
     ref._disabled=true;
  }

示例：https://stackblitz.com/edit/disable

Answer 2

我为那些与我有相同问题的人找到了这种选择：

在我的ts文件中：

checkIfBeforeDate(bookedDate) {
return moment(bookedDate).isBefore(this.nowDate);

}

我的html：

<td mat-cell *matCellDef="let booking">
            <button mat-raised-button #ref [disabled]="checkIfBeforeDate(booking.booked_date)" color="warn" class="booking-cancel-button">Annuler</button>
          </td>

禁用数据表上的按钮（角度材质）

2 个答案: