时间戳

首页 > 解决方案 > Angular 7根据对象键显示/隐藏表并根据对象值设置div

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

问题描述

我有一个对象

{“HH”：“HouseHold”，“A1834”：“18-34 岁成人”，“B1214”：“12-14 岁男孩”}

我必须在 div 中显示对象值 1 时间

<button>Previous</button>
<div>HouseHold</div> <!-- Showed 1st value on page load -->
<button>Next</button>

& 基于这个对象，我生成了 3 个表，它们的 id 作为对象键

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

任务：

当页面加载 div 设置为<div>HouseHold</div>& 只有第一个具有 id HH的表是可见的，其他表是隐藏/显示：无

例如：

<table #HH style="display:block;" >....</table>
<table #A1834 style="display:none;">....</table>
<table #B1214 style="display:none;">....</table>

每当用户单击“下一步”按钮时，div 值更改为<div>Adult 18-34</div>id为A1834的表可见/显示：块和其他 2 个表应为隐藏/显示：无

例如：

<table #HH style="display:none;" >....</table>
<table #A1834 style="display:block;">....</table>
<table #B1214 style="display:none;">....</table>

同样在 Next click div value changes to <div>Boy 12-14</div>and table with id B1214 is visible/display:block & other 2 tables hide/display:none

上一个按钮反之亦然。

我如何通过将对象绑定到 div 和表在 angular 7 中做到这一点？角新手在这里。

标签： htmlbindingangular7

解决方案

在这里你可以使用*ngIfAngular专门提供的概念。首先你在Html Component中编写所有表，然后在每个表中的div中这样写

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

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

推荐阅读