无法根据角度formarray下拉选择显示/隐藏div [关闭]

Posted 2023-03-25

【中文标题】无法根据角度formarray下拉选择显示/隐藏div [关闭]

【英文标题】：Unable to show/hide div based on angular formarray dropdown selection [closed]

【发布时间】：2021-12-20 12:49:15

【问题描述】：

我是一名学生，正在开发一个以 Angular 连接多个数据库的功能流程 UI。

我无法根据 formArray 下拉列表中的选定值呈现相应的 div。（我们使用多个 formArray 对象的相同下拉列表。）

请知道如何解决这个问题。

这里是代码链接。

https://stackblitz.com/edit/angular-ivy-ijn5xa?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

你想让每个下拉菜单分开工作吗？

欢迎来到 ***。请提醒您必须通过附加最小源代码来提供Minimal, Reproducible Example。您不应该只附加链接，因为链接是针对外部来源的。想象一下链接被破坏了，这个问题可能无法重现，并且可能会被投票关闭。

【参考方案1】：

由于您正在为employees FormArray 中的每个employee FormGroup 共享selectedType，因此html（数据库部分）将根据最新的selectedType 值显示为相同。

要解决此问题，您必须根据为每个 employee FormGroup 选择的 emptype 值显示每个 HTML（数据库部分）。

组件.ts

getEmployeeReplyType(empIndex: number): FormControl 
  let formGroup = this.employees().controls[empIndex] as FormGroup;
  return formGroup.controls['replytype'] as FormControl;

component.html

<div *ngIf="getEmployeeReplyType(empIndex).value == 'Oracle'" class="col-md-12 no-padding">
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'mysql'" class="col-md-12 no-padding">
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'SQLServer'" class="col-md-12 no-padding">
  ...
</div>

<div *ngIf="getEmployeeReplyType(empIndex).value == 'MongoDB'" class="col-md-12 no-padding">
  ...
</div>

接下来，您不需要(change) 事件，因为不需要onChange 函数。

<select
  formControlName="replytype"
  class="form-control select2"
  type="text"
  style="width: 20%;"
  >
  ...
</select>

Sample Solution on STackBlitz