Как динамически обновлять таблицу?

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

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

Например, давайте создадим интерфейс "User" для представления каждой строки таблицы:

export interface User {
  id: number;
  name: string;
  email: string;
}

Затем, вы должны использовать сервис или компонент для получения данных таблицы, которые могут быть загружены с сервера, получены из базы данных или переданы из другого компонента. В сервисе или компоненте вы можете создать массив пользователей и заполнить его данными:

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  getUsers(): User[] {
    // Загрузить данные пользователя с сервера или
    // выполнить другую логику получения данных.
  }
}

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

import { Component } from '@angular/core';
import { User } from './user.interface';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-table',
  template: `
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  `
})
export class UserTableComponent {
  users: User[];

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

В этом примере мы используем структурную директиву *ngFor, чтобы пройтись по массиву пользователей и отобразить каждого пользователя в строке таблицы. При инициализации компонента мы вызываем метод getUsers() из сервиса пользователя, чтобы получить данные таблицы.

Если данные таблицы изменяются динамически, например, при обновлении через AJAX-запрос или при изменении их в другом компоненте, вы можете обновить данные, вызвав метод getUsers() снова или используя другие подходящие методы для обновления данных в сервисе.

Например, вы можете добавить метод refreshUsers() в сервис пользователя:

@Injectable()
export class UserService {
  users: User[];

  getUsers(): User[] {
    // Загрузить данные пользователя с сервера или
    // выполнить другую логику получения данных.
  }

  refreshUsers(): void {
    this.users = this.getUsers();
  }
}

И затем вызвать этот метод из другого компонента:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-management',
  template: `
    <button (click)="refreshUsers()">Refresh Users</button>
    <app-user-table></app-user-table>
  `
})
export class UserManagementComponent {
  constructor(private userService: UserService) {}

  refreshUsers(): void {
    this.userService.refreshUsers();
  }
}

Таким образом, при клике на кнопку "Refresh Users" данные в таблице будут обновляться. Это происходит благодаря использованию двунаправленного связывания данных и функциональности, предоставляемой Angular для управления состоянием данных и их отображением в таблице.