Question

我在席卡中添加了一个复选框。在“复选框”上单击，我得到“复选框”的值。但是，当我在mat-card上添加click事件时，该复选框被选中，但没有任何价值。而且我将复选框的值存储在数组中。

我尝试过了。基本上，我必须在数组中获得角色。

点击Mat卡(click)="Roles()"上的功能。

<mat-card (click)="Roles()" [ngStyle]="{'background': admin? 'rgba(45, 45, 45, 0.5)':'bottom'}" class="role-card" class="card-style" style="background: bottom">
      <img mat-card-image src="../assets/admin_logo.png">
      <mat-checkbox class="checkboxStyle" [(ngModel)]="admin" color='primary' (change)="onRoleChange($event)" value="admin" [ngModelOptions]="{standalone: true}">
      </mat-checkbox>
</mat-card>


Roles(){
  this.admin = !this.admin;
  return false
}

onRoleChange(event) {
  const roles = <FormArray>this.roleFormGroup.get('roles') as FormArray;
  if(event.checked) {
    roles.push(new FormControl(event.source.value))
  } else {
    const i = roles.controls.findIndex(x => x.value === event.source.value);
    roles.removeAt(i);
  }
}

我没有收到错误消息，只是在垫板上单击我无法获得复选框的值。

在onRoleChange触发器上，基本上是复选框上的事件触发器。

Answer 1

好吧，我尝试了一下，并找到了解决方案。这是解决方案。

<div fxLayout="row" fxlayout.sm="column" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutGap="10px">

                    <mat-card [ngStyle]="{'background': admin? 'rgba(45, 45, 45, 0.5)':'bottom'}" class="role-card" class="card-style" style="background: bottom">
                      <img mat-card-image src="../assets/admin_logo.png">
                      <mat-checkbox class="checkboxStyle" [(ngModel)]="admin" color='primary' (change)="onRoleChange($event)" value="admin" [ngModelOptions]="{standalone: true}"></mat-checkbox>
                    </mat-card>

                    <mat-card [ngStyle]="{'background': employee? 'rgba(45, 45, 45, 0.5)':'bottom'}" class="role-card" class="card-style" style="background: bottom">
                        <img mat-card-image src="../assets/employee_logo.png">
                        <mat-checkbox class="checkboxStyle" [(ngModel)]="employee" color='primary'  (change)="onRoleChange($event)" value="employee" [ngModelOptions]="{standalone: true}"></mat-checkbox>
                    </mat-card>

                    <mat-card [ngStyle]="{'background': customer? 'rgba(45, 45, 45, 0.5)':'bottom'}" class="role-card"  class="card-style" style="background: bottom">
                        <img mat-card-image src="../assets/customer_logo.png">
                        <mat-checkbox class="checkboxStyle" [(ngModel)]="customer" color='primary'  (change)="onRoleChange($event)" value="customer" [ngModelOptions]="{standalone: true}"></mat-checkbox>
                    </mat-card>
                </div>

在TS文件中，我编写了一个函数和一个RoleChange事件

onRoleChange(event) {
      console.log('on role change');
      const roles = <FormArray>this.roleFormGroup.get('roles') as FormArray;
      if(event.checked) {
        roles.push(new FormControl(event.source.value));
      } else {
        const i = roles.controls.findIndex(x => x.value === event.source.value);
        roles.removeAt(i);
      }
    }

    selectRole(val){
      console.log('on select change');
      const roles = <FormArray>this.roleFormGroup.get('roles') as FormArray;
      if(val == 'admin'){
        this.admin =! this.admin;
        if(this.admin)
          roles.push(new FormControl(val))
      }else if(val == 'employee'){
        this.employee =! this.employee;
        if(this.employee)
         roles.push(new FormControl(val))
      }else{
        this.customer =! this.customer;
        if(this.customer)
          roles.push(new FormControl(val))
      }

    }

只需单击matcard即可选中复选框，以获取表单数组中的值。

垫卡点击未获得复选框的值

1 个答案: