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

Question

我在尝试禁用数据表中的按钮时遇到问题。 我解释一下，我的数据表中有我的客户的所有预订，并且它有一个“取消”按钮，我想在预订日期过后通过这个按钮“禁用”。

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

component.html:

  <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>

component.ts:

export class UserBookingsComponent implements OnInit {
  isLoading = false;
  isDisabled = false;

  displayedColumns: string[] = [
    'date_of_booking',
    'booked_date',
    'booked_time',
    'coach',
    'cancel_booking'
  ];
  dataSource: MatTableDataSource<any>;

  bookings: Booking[] = [];
  userId: number;
  disableBookingId: number;
  nowDate = moment().format('YYYY-MM-DD');

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private _authService: AuthService,
    private _userService: UserService,
    private _coachService: CoachService,
    private _route: ActivatedRoute,
    private _router: Router
  ) {}

  ngOnInit() {
    this.userId = this._authService.getUserId();
    this.isLoading = true;

    this._userService.getUserBookings(this.userId).subscribe(bookings => {
      bookings.forEach(booking => {
        if (moment(booking.booked_date).isBefore(this.nowDate)) {
          console.log(booking.id);
          this.disableBookingId = booking.id;
        }
      });
      this.dataSource = new MatTableDataSource(bookings);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      // this.bookings = bookings;
      this.isLoading = false;
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

这是数据表：

谢谢！

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>