Для вывода данных из массива в Angular, вы можете использовать структурную директиву ngFor. ngFor позволяет перебирать элементы массива и генерировать HTML-элементы на основе каждого элемента массива.
Для начала, убедитесь, что вы импортировали CommonModule из @angular/common в модуль, где вы собираетесь использовать ngFor.
Пример импорта:
import { CommonModule } from '@angular/common';
Затем, в шаблоне компонента, вы можете использовать ngFor для вывода данных массива. Например, предположим, что у вас есть массив с названиями фруктов:
fruits: string[] = ['apple', 'banana', 'orange'];
В HTML-шаблоне компонента вы можете использовать ngFor для вывода названий фруктов:
<ul>
<li *ngFor="let fruit of fruits">
{{ fruit }}
</li>
</ul>
В этом примере каждый элемент массива будет отображаться в виде отдельного элемента списка <li>. Вы можете использовать fruit внутри элемента <li> для доступа к текущему элементу массива.
В результате, на странице будет отображаться список фруктов:
- apple
- banana
- orange
ngFor также позволяет получить доступ к индексу текущего элемента:
<ul>
<li *ngFor="let fruit of fruits; let i = index">
{{ i + 1 }}. {{ fruit }}
</li>
</ul>
Теперь результат будет выглядеть так:
1. apple
2. banana
3. orange
Также вы можете использовать ngFor для вывода данных в таблицу или другой тип макета, в зависимости от ваших потребностей.
Выведение данных из массива полученного в JSON с использованием ngFor позволяет динамически отображать данные в зависимости от содержимого массива и обновлять их, если данные изменяются. Это делает шаблоны в Angular гибкими и мощными для отображения данных.