Angular中使用*ngIf根据下拉框选中值控制组件显隐的方法

我是Angular JS初学者，希望实现：下拉选择框选中All Months选项时，隐藏对应的月度汇总指标卡片组件。相关界面参考截图：

我尝试给目标组件加了*ngIf指令，代码如下：

<app-monthly-summary-metric-card
*ngIf="this.filters.month === 'All Months'"
class="p-3 ml-3"
[model]="metrics"></app-monthly-summary-metric-card>

想确认该需求是否可以实现。

这个需求用*ngIf完全可以实现，你现在的代码有两个小问题，改完就生效：

• 判断逻辑写反了：当前代码的效果是选中All Months时才显示组件，和你要的隐藏效果刚好相反，给条件加个取反符就行
• Angular模板里访问组件属性不需要加this，直接写属性名即可

修改后的代码：

<app-monthly-summary-metric-card
*ngIf="filters.month !== 'All Months'"
class="p-3 ml-3"
[model]="metrics"></app-monthly-summary-metric-card>

如果改完还是不生效，先检查下拉框绑定的filters.month实际值：选中All Months时，在模板里临时加{{ filters.month }}打印下当前值，确认是不是严格等于字符串'All Months'——部分下拉组件会给选项绑定数字、空值或者其他自定义值，值不匹配的话判断条件不会触发。
另外提一句：你写的*ngIf、[model]绑定语法是Angular 2+及以上版本的写法，如果你实际用的是1.x版本的AngularJS，需要把指令换成ng-if，写法调整为ng-if="filters.month !== 'All Months'"即可。

内容的提问来源于stack exchange，提问作者cdt