时间戳

首页 > 解决方案 > 基于另一个材料复选框更新的复选框

angular - 基于另一个材料复选框更新的复选框

问题描述

我在这样的页面上有两个材料复选框和几个 div

 <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.budgetChecked=!myChangeRequest.budgetChecked"  >Budget Change
          </mat-checkbox>
          <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.drawdownChecked= !myChangeRequest.drawdownChecked">Drawdown Date
          </mat-checkbox>

HTML

我试图实施的方式是

检查提款时，如果没有，也需要自动检查预算。但是当有人检查预算时，它不会影响提款。此外，当提款取消选中时，不需要取消选中预算。

所以我所做的是

          <mat-checkbox labelPosition="after"
            (change)="myChangeRequest.drawdownChecked= !myChangeRequest.drawdownChecked;myChangeRequest.budgetChecked=true">Drawdown Date
          </mat-checkbox>

由于我是 Angular 的新手，我不确定它的好坏，或者使用 [(ngModel)] 的双向绑定是否好，或者它是否不能达到目的。

标签： angulartypescript

解决方案

材质（输入或复选框）可以与 [(ngModel)] 一起使用 - 或使用 formControlName 在反应式表单中使用 - 并且，在 mat-checkbox 的情况下，您也可以使用（更改）

在 Angular 中，在一个事件中你总是有作为参数$event，所以你可以使用一些类似的

<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.budgetChecked">
  Budget Change
</mat-checkbox>
<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.drawdownChecked"
     (change)="drawDownChange($event)">Drawdown Date
</mat-checkbox>

在 .ts 你创建函数

drawDownChange(event:any)
{
    if (event.checked)
         this.myChangeRequest.budgetChecked=true;
}

看到，在 mat-checkbox 中，事件返回一个对象，并且属性“checked”是 true 或 false。（您可以在文档中看到MatCheckboxChange类型的对象。在正常输入(input)="myFunction($event)"中，参数是输入的值

注意：您只能使用 .html 的方式

<mat-checkbox labelPosition="after" [(ngModel)]="myChangeRequest.drawdownChecked"
     (change)="$event.checked && myChangeRequest.budgetChecked=true">Drawdown Date
</mat-checkbox>

推荐阅读