В Angular можно достучаться до массива элементов с помощью директивы *ngFor. Директива *ngFor позволяет создавать повторяющиеся элементы HTML на основе массива данных.
Для начала, вам необходимо импортировать директиву CommonModule из @angular/common в модуле, в котором вы хотите использовать *ngFor. Вы можете сделать это следующим образом:
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
//...
})
export class MyModule { }
После импорта CommonModule вы можете использовать директиву *ngFor в вашем компоненте. Директива *ngFor принимает два обязательных атрибута: let и of. Атрибут let задает имя для каждого элемента массива, а атрибут of указывает на сам массив.
Пример использования *ngFor:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
В этом примере мы создаем список ul, внутри которого создается повторяющийся элемент li для каждого элемента массива items. Атрибут let задает имя item для каждого элемента массива, и мы можем использовать это имя для отображения значения элемента внутри тега li.
Вы также можете получить доступ к индексу элемента, используя дополнительную переменную "index", как показано в следующем примере:
<ul>
<li *ngFor="let item of items; let i = index">{{ i }}. {{ item }}</li>
</ul>
В этом примере мы добавили переменную "i", которая представляет индекс текущего элемента массива. Мы используем эту переменную, чтобы отобразить номер пункта перед значением элемента.
Вы также можете добавить условия для отображения элементов с помощью директивы *ngIf. Например, если вы хотите отобразить только элементы, у которых значение больше 5, вы можете сделать это так:
<ul>
<li *ngFor="let item of items" *ngIf="item > 5">{{ item }}</li>
</ul>
В этом примере, с помощью директивы *ngIf, мы фильтруем элементы массива, чтобы отобразить только те, у которых значение больше 5.
В итоге, с помощью директивы *ngFor вы можете легко достучаться до массива элементов в Angular и создать динамические списки элементов HTML на основе этого массива.