在 angular 9 中，隐藏指令在条件更改后不显示隐藏元素

Question

我有两个组件，

1. 应用组件：

此组件具有 angular material 按钮切换和示例数据。

2. 结果组件：

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

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

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

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

我在 stackblitz 中创建了这个项目，请在下面找到 link。

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

Answer 1

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

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

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

console.log(value, typeof value);