Angular：如果下拉列表中的此选项显示此 div答案

【问题标题】：Angular: If this option in dropdown show this divAngular：如果下拉列表中的此选项显示此 div
【发布时间】：2023-03-15 18:40:01
【问题描述】：

当用户在下拉选择中选择选项时，如何在 Angular（4 到 9）中显示和隐藏 div？

无论我选择哪个选项，我下面的代码都只显示一个/相同的 div。

 public Terminated = true; 
 public Release = true;

selectedFilter:string;
   public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter='release';
  } 

  filterChanged(selectedValue:string){
    if(this.selectedFilter) {
       this.Terminated = false;
    } else {
    this.Release = false
   }

<select class="form-control" (change)="filterChanged($event.target.value)">
                  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
                  </option>
                 </select>
                 
<div [hidden]="Terminated"><p>terminated content here</p></div>
<div [hidden]="Release"><p>release content here</p></div>

【问题讨论】：

查看stackoverflow.com/questions/46000950/…
感谢大家的帮助！我现在通过第一个解决方案可以正常工作！

标签： angular

【解决方案1】：

在您的代码中，您正在检查 selectedFilter 以将变量设置为 true 和 false，但此变量的值仅在构造函数中设置。因此，选择下拉菜单中的更改没有任何影响。

您可以将代码更改为以下，

component.html

<select class="form-control" [(ngModel)]="selectedFilter">
  <option *ngFor="let type of filterTypes" [value]="type.value">
    {{type.display}}
  </option>
</select>
                 
<div [hidden]="selectedFilter !== 'terminated'"><p>terminated content here</p></div>
<div [hidden]="selectedFilter !== 'release'"><p>release content here</p></div>
<div [hidden]="selectedFilter !== 'reports'"><p>detailed report content here</p></div>

组件.ts

 selectedFilter:string;
 public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter = 'release';
  }

【讨论】：

很好的答案，谢谢！好奇，因为我是 Angular 的新手，但对 jQuery 相当了解。当用户选择一个新选项时，我如何添加延迟或动画，然后慢慢地看到他们的选项出现在下面？现在没有任何视觉上的区别，任何东西都在真正发生变化。
你可以定义动画的css类（显示和折叠），然后像[ngClass]="{'content-shown':selectedFilter === 'terminated','content-hidden':selectedFilter !== 'terminated'}"那样使用css类

【解决方案2】：

尝试使用 *ngIf 指令。除此之外，我认为你的代码有一些逻辑问题，我会建议你做一些更正：

 public terminated = false; 
 public release = true;

selectedFilter:string;
   public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter='release';
  } 

  filterChanged(_selectedValue:string){
    if(_selectedValue == 'release') {
       this.terminated = false;
       this.release = true;
    } else {
    this.release = false;
    this.termintated = true;
   }

然后在你的 html 中使用 ngIf：

<select class="form-control" (change)="filterChanged($event.target.value)">
                  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
                  </option>
                 </select>
                 
<div *ngIf="terminated"<p>terminated content here</p></div>
<div *ngIf="release"><p>release content here</p></div>

【讨论】：

【解决方案3】：

首先，无论如何，条件都将始终为真 - 字符串值将始终评估为真。其次，最好在输入上使用简单的 [(ngModel)] 并在 ngContainer 上使用 ngSwitch 显示内容，如下所示：

<select [(ngModel)]="selectedOption" [ngModelOptions]="{standalone: true}">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}</option>
</select>
<ng-container [ngSwitch]="selectedOption">
  <ng-container *ngSwitchCase="release">release..</ng-container>
</ng-container>

【讨论】：