Question

我正在创建一个有角度的表格，问题之一是多选问题。只有在上一个问题中选择了一个选项，下一个问题才应该可见。

以前，我一直在这样做：

HTML：

[class.active-card]="rla.isActive"

.ts：

<mat-form-field class="selector">
      <mat-select placeholder="Q1"
        formControlName="Q1" multiple>
        <mat-option *ngFor="let option of options" [value]="option.value" (click)="setBool(true)">
          {{ option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

<mat-form-field class="selector" *ngIf="bool">
      <mat-select placeholder="Q2"
        formControlName="q2">
        <mat-option *ngFor="let option of options2" [value]="option.value">
          {{ option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

之所以如此，是因为当我单击一个选项时，布尔值设置为true，因此还显示了Q2。但是，我遇到了一个问题，即当我取消选择选项（从而未选择任何选项）时，问题显然不再被隐藏。

是否有解决方案，如果选择了任何选项，则bool = true，如果未选择任何选项，则bool = false？

Answer 1

您可以使用selectionChange事件代替点击

 <mat-select placeholder="Select your option" [(ngModel)]="option" name="action" 
      (selectionChange)="onChange()">
     <mat-option *ngFor="let option of actions" [value]="option">
       {{option}}
     </mat-option>
 </mat-select>

然后您可以在该函数中设置bool

onChange() {
  //Do something
}

如果您不希望出现该问题，默认情况下将此变量初始化为false

Answer 2

已解决：

我能够通过使用找到解决方案

x y z
0 A 0
1 A 1
  B

(selectionChange)="onChange()"

根据是否选中复选框，显示另一个表单问题

2 个答案: