Question

我有一个物体

{“ HH”：“ HouseHold”，“ A1834”：“ Adult 18-34”，“ B1214”：“ Boy 12-14”}

我必须从中一次显示div中的对象值

<table #HH >....</table>
<table #A1834 >....</table>
<table #B1214 >....</table>

＆基于此对象，我生成了3个表，它们的ID作为对象键

<div>HouseHold</div>

任务：

当页面加载div设置为<table #HH style="display:block;" >....</table> <table #A1834 style="display:none;">....</table> <table #B1214 style="display:none;">....</table>时，仅显示ID为 HH 的第一张表，其他表则隐藏/显示：无

例如：

<div>Adult 18-34</div>

每当用户单击下一步按钮时，div值将更改为<table #HH style="display:none;" >....</table> <table #A1834 style="display:block;">....</table> <table #B1214 style="display:none;">....</table>，并且ID为 A1834 的表将可见/显示：block和其他2个表应为隐藏/显示：无

例如：

<div>Boy 12-14</div>

类似地，在下次单击时，div值更改为{{1}}，且ID为B1214的表可见/显示：块，其他2个表隐藏/显示：无

，反之亦然。

我如何在Angle 7中通过将对象绑定到div＆表来做到这一点？这里有角的新手。

Answer 1

在这里您可以使用Angular特别提供的*ngIf概念。首先，您在Html Component中编写所有表，然后在每个表div中这样编写

<div *ngIf="HouseHold">your household table contains</div>

这样可以与ngIf一起使用，这样您就可以轻松地一次加载一个表。有关更多详细信息，请选中此Angular ngIF

Angular 7根据对象键显示/隐藏表并根据对象值设置div

1 个答案: