В этой статье я покажу вам пример, демонстрирующий, как создать таблицу HTML и динамически заполнять ее с помощью собственной директивы ngFor в Angular 9.

1 - Создайте пустой проект Angular

Во-первых, давайте начнем с создания пустого проекта Angular 9. Для этого откройте терминал в своем VScode и введите следующую команду:

> ng new LoadDataDynamically

и обязательно следуйте командным подсказкам. Это может занять немного времени, потому что Angular собирается загрузить необходимые пакеты. Ниже приведена ссылка на статью, которую я создал, в которой показано, как создать пустой проект Angular 9 вместе со всеми необходимыми требованиями.



Как начать новый проект Angular 9 за несколько простых шагов
Необходимое программное обеспечение для запуска Angular medium.com



2 - Создайте фиктивный набор данных, который будет привязан к таблице HTML.

После успешного создания приложения откройте решение и найдите файл «app.component.ts». Внутри конструктора создадим экземпляр нового массива объектов, который будет содержать базовые данные, которые мы будем использовать для привязки к таблице HTML.

data: Array<any>;constructor(){
    this.data = [
        { firstName: 'John', lastName: 'Doe', age: '35' },
        { firstName: 'Michael', lastName: 'Smith', age: '39' },
        { firstName: 'Michael', lastName: 'Jordan', age: '45' },
        { firstName: 'Tanya', lastName: 'Blake', age: '47' }
    ];
}

Код внутри файла «app.component.ts» должен выглядеть, как на снимке экрана ниже:

На данный момент у нас есть объект, содержащий информацию, которую мы можем использовать для заполнения нашей HTML-таблицы. Этот объект заполняется во время создания этого класса, и конструктор выполняет заполнение за нас.

3 - Создайте таблицу HTML для динамической привязки данных из component.ts

Откройте файл app.component.html и удалите все его содержимое. По умолчанию Angular заполняет файл информацией / html. А пока давайте избавимся от всего и создадим нашу HTML-таблицу.

Ниже приведен HTML-код, который необходимо добавить в файл «app.component.html».

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let people of data">
            <td>{{people.firstName}}</td>
            <td>{{people.lastName}}</td>
            <td>{{people.age}}</td>
        </tr>
    </tbody>
</table>

Вы заметите, что внутри ‹tbody› у меня есть только один ‹tr› с тремя наборами тегов ‹td›. Это потому, что мы не собираемся вручную создавать элементы таблицы, мы будем полагаться на директиву * ngFor для заполнения данных в массиве за нас.

Директива * ngFor выполняет цикл по массиву объектов, который мы ей предоставили, и автоматически привязывает элементы для каждого объекта к соответствующему ‹td› в зависимости от того, как мы определили его в шаблоне.

По сути, * ngFor действует аналогично тому, как ведет себя цикл for, и в этом случае мы используем его, чтобы перебирать каждый элемент в массиве и что-то делать с информацией. Таким образом мы создадим новую строку с тремя ячейками для каждого объекта в списке.

4 - Создайте и запустите приложение

Теперь, когда мы завершили реализацию нашего кода, давайте создадим приложение и запустим его в браузере, чтобы посмотреть, как оно будет себя вести.

Чтобы создать приложение, выполните следующую команду в терминале VScode:

> ng serve -o

Как только приложение завершит процесс сборки, оно автоматически запустится в браузере.

Вы заметите, что наша таблица успешно загружена и что все данные в массиве, который мы создали на «app.component.ts», были правильно привязаны к таблице.