如何在 function 調用 angular 6 時選中 angular 復選框

Question

我有一個像這樣的 HTML 復選框和我的 function

<mat-checkbox 
  [checked]="uncheckrx" 
  (change)="onClickExpandRx($event.checked)">
  Rx
</mat-checkbox>

<button 
  class="btn btn-default" 
  id="cancelConfirmForDelete" 
  (click)="cancelConfirmDelete()" 
  translate>
  Cancel
</button>

單擊按鈕時，我需要選中復選框。 我正在使用 angular 6

Answer 1

由於您要綁定到mat-checkbox上的uncheckrx ，因此可以在cancelConfirmDelete方法中簡單地將其設置為true ，這應該可以解決問題。

只需像這樣實現您的功能：

import {Component} from '@angular/core';

@Component({
  selector: 'checkbox-overview-example',
  templateUrl: 'checkbox-overview-example.html',
  styleUrls: ['checkbox-overview-example.css'],
})
export class CheckboxOverviewExample {
  uncheckrx;

  onClickExpandRx(checked) {
    this.uncheckrx = checked;
  }

  cancelConfirmDelete() {
    this.uncheckrx = true;
  }
}

---

這是供您參考的工作樣本StackBlitz 。

Answer 2

您可以使用ngModel綁定來做到這一點，例如：

<mat-checkbox
    [(ngModel)]="value"
    name="test">THIS IS A CHECKBOX</mat-checkbox>

在組件/容器中將值設置為“ true”，例如在按鈕單擊功能中。 在https://material.angular.io/components/checkbox上查看更多

Answer 3

創建 ngModel 綁定以切換檢查狀態

<mat-checkbox  [(ngModel)]="isOtherChecked">
      Other (please specify):
    </mat-checkbox>

TS

export class AppComponent {

  isChecked:boolean = false;

dropdownChangeEvent(event: any) {    
  this.isChecked = true;
}

}