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

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

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

public=true；
公开发布=真实；
selectedFilter:字符串；
公共筛选器类型=[
{值：'empty'，显示：''}，
{值：'release'，显示：'release Report'}，
{值：'reports'，显示：'Detail Report'}，
{值：'terminated'，显示：'terminated Report'}，
];
构造函数（）{
这个。selectedFilter='release'；
} 
过滤器已更改（selectedValue:string）{
如果（此.selectedFilter）{
这个。终止=假；
}否则{
此.Release=false
}

{{type.display}
此处终止内容

在此处发布内容

首先，无论发生什么情况，条件始终为真-字符串值始终为真。其次，最好在输入和显示内容时使用简单[（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>

{{type.display}
释放。。

在代码中，您正在检查

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>

---

尝试使用*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>

{{type.display}
检查此项感谢所有的帮助，各位！我现在通过第一个解决方案工作了！回答很好，谢谢！好奇，因为我是Angular的新手，但对jQuery相当了解。当用户选择一个新选项时，我如何添加延迟或动画，然后慢慢看到他们的选项出现在下面？现在没有视觉距离事实上，任何事情都在发生变化。您可以为动画（显示和折叠）定义css类，然后使用css类，如
[ngClass]=“{'content-show'：selectedFilter=='terminated'，'content-hidden'：selectedFilter！=='terminated'}”
<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>