如果选中具有特定名称的复选框，如何使特定的 <div> 显示？

Question

我有一个 Angular Material Stepper 元素，第一个 <mat-step> 包含一个复选框列表供用户检查。

以下是第一个带有复选框的<mat-step>：

<mat-step [stepControl]="itemCheckboxes">
  <ng-template matStepLabel>Select The Items You Want</ng-template>
  <span *ngIf="items.length === 0">No items currently in your account.</span>
  <ul style="list-style-type:none; padding-left: 0px;">
    <li *ngFor="let item of items">
      <mat-checkbox (change)="onCheckboxChange($event, item.name)">{{ item.name }}</mat-checkbox>
    </li>
  </ul>
  <div>
    <button mat-button matStepperNext>Next</button>
  </div>
</mat-step>

我正在尝试在以下<mat-step> 中显示特定的<div>，前提是选中具有特定{{item.name}}s 的复选框。

例如，如果用户选中一个名为“Banana”的复选框，则与选中的“Banana”复选框相关的特定 <div> 将显示。如果用户选中一个名为“Apple”的复选框，则会显示不同的<div>。

我将如何编写代码来实现这一目标？我正在尝试编辑现有项目，而且我对编码非常陌生，但我需要快速完成这项工作，因此非常感谢分步详细信息。谢谢！

Answer 1

您需要了解“Angular 哲学”。 .ts（模型）中的变量与 html（视图）中的元素角度相关

所以如果你声明一个变量

myvariable:boolean=true

你的复选框是

 <mat-checkbox [(ngModel)]="myvariable">Banana</mat-checkbox>

两个方向的 [(ngModel)] 关系-绑定两种方式-变量和复选框。如果选中复选框，则变量为 true，如果取消选中复选框，则变量为 false。

所以你可以在任何地方写作

<div *ngIf="myvariable">
   If you see this is because the checkbox is true
</div>

你有一个“项目”数组，所以如果你做一个绑定 - 使用 [(ngModel)] 到一个变量

 <mat-checkbox [(ngModel)]="item.checked">{{ item.name }}</mat-checkbox>

你可以写

<div *ngIf="items[0].checked">
   You check the first element of the list before
</div>

更新如果我们想知道“香蕉”是否被选中

好吧，我想我们有一个对象数组

items=[{name:"Banana"},{name:"apple"},{name:"orange"}...]

检查一个或多个时，我们将阵列转换为某些

中的数组

items=[{name:"Banana",checked:true},{name:"apple"},{name:"Orange",checked:false}...]

查看一个或多个元素可以没有“已检查”属性

类似的函数

isSelect(fruit:string)
{
    return this.items.find(x=>x.checked && x.name==fruit)!=null
}

返回真或假。现在您有多种选择：

1.-使用吸气剂

get isBananaSelected()
{
    return this.isSelect("Banana")
}

并在 ngIf 中使用

   <div *ngIf="isBananaSelected">...</div>

2.-使用一个辅助变量，当步进器改变步长时计算

<mat-horizontal-stepper (selectionChange)="selectionChange($event)">

isVisibleDiv:boolean=false //and auxiliar variable
selectionChange(event)
{
  if (event.selectedIndex==1){ //remember the index is 0 for the first step, 1 for the second...
      this.isVisibleDiv=this.isSelect("Banana")
  }
}

//and 
<div *ngIf="isVisibleDiv">...</div>

3.-使用辅助变量并在每次选择中调用函数

<mat-checkbox (change)="isVisibleDiv=this.isSelect("Banana")">

注意：看起来 getter 是最好的选择，但要小心，getter 会执行多次，第二个选项仅在更改步骤时执行，第三个选项在任何复选框中执行每次更改。 （实际上对于单纯形函数——就像在这种情况下——你没有注意到更好或最差的性能），但我们需要在简单和性能之间进行选择