Angular 7 Показать / скрыть таблицы на основе ключей объекта и установить div на основе значений объекта

Question

У меня есть один объект

{"HH": "HouseHold", "A1834": "Adult 18-34", "B1214": "Boy 12-14"}

, из которого я должен показывать значения объекта в div за один раз

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

и на основе этих объектов я создал 3 таблицы с их идентификатором в качестве ключей объекта

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

Задача:

Когда для загрузки страницы div установлено значение <div>HouseHold</div>, и видна только 1-я таблица с идентификатором ЧЧ , а другие таблицы скрыты / отображаются:none

Например:

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

всякий раз, когда пользователь нажимает кнопку Далее , значение div изменяется на <div>Adult 18-34</div> и таблицу с идентификатором A1834 является видимым / отображаемым: блок и другие 2 таблицы должны быть скрыты / отображены: нет

Например:

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

аналогично при следующем значении div следующего клика меняется на <div>Boy 12-14</div> и таблица с идентификаторомB1214 виден / отображен: блок и другие 2 таблицы скрыты / отображены: нет

и наоборот для кнопки «Предыдущий».

Как я могу сделать это в angular 7, привязав объект к div &таблицы?Угловой новичок здесь.

Answer 1

Здесь вы можете использовать *ngIf концепцию, специально предоставленную Angular. Прежде всего вы пишете всю таблицу в компоненте Html, а затем в каждую таблицу div пишете так:

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

Так вот, как это использовать с ngIf, вы можете легко загрузить одну таблицу за раз. Для более подробной информации, пожалуйста, проверьте это Угловой ngIF