隐藏指令在条件更改后未显示隐藏元素，角度为 9

Question

我有两个组件，

1. 应用组件：

这个组件有，角度材质按钮切换和示例数据。

1. 结果组件：

该组件列出了应用组件传递的数据。

切换按钮有“全部”和“仅失败”两个选项，单击“全部”应显示所有数据，单击“仅失败”应仅显示失败数据。

我的问题是，点击“仅失败”选项后，它只显示失败的数据，但是点击“全部”选项时，它没有显示所有数据，它只显示失败的数据。

注意：我需要在不修改组件结构、数据流和 HTML 骨架的情况下实现这一点。

我在 stackblitz 中创建了这个项目，请找到以下链接。

https://stackblitz.com/edit/angular-vjiuyc?file=src/results/results.component.html

Answer 1

从 html 值字段传递的数据是一个字符串。你的比较应该是这样的：

[hidden]="showFailOnly==='true'"

调试此类问题的一种简单方法是记录您的值及其类型

console.log(value, typeof value);