Как заполнить список данных из сервиса в Angular

Question

Я довольно новичок в Angular, у меня есть список, который мне нужно показать на экране, я смог получить список с жестко закодированными данными, но мне нужно получить данные из моего сервиса, который вызывая API, эта часть тоже сделана. Моя проблема заключается в том, как заменить жестко запрограммированное значение.

В моем списке есть 3 столбца: Доски - Id - Статус

 export class CardComponent implements OnInit
   {
    @Input()
    public agent: Agent;
    public Boards: string = '';
    public Id: number = 0;
    public status: string = '';

, и это список со значением в жестком коде:

  public BoardsList: any[] = [
    {
        "Id": "123R",
        "Boards": "TestB",
        "status": 1
    },
    {
        "Id": "345F",
        "Boards": "TestV",
        "status": 0
    }
];

Это HTML страница:

  <div class="_header">
    <div class="_item">Boards</div>
    <div class="_item">ID</div>
    <div class="_item">Status</div>
</div>
<div class="_data"
     *ngFor="let mLSBoards of BoardsList">
    <div class="_data__item">{{mLSBoards.Boards}}</div>
    <div class="_data__item">{{mLSBoards.Id}}</div>
    <div class="_data__item">{{mLSBoards.status}}</div>
</div>

Это то, что я вижу на экране:

       Boards       ID       Status
       TestB        123R      1
       TestV        345F      0

Я пытался создать метод, возвращающий List из Службы, но не уверен, как (Этот код не работает, но этот. На Agent.Boards есть 3 поля, которые мне нужны, я также импортировал службу здесь.

private GetBoardsList(BoardsList: any[]): void
{
    this.Agent.Boards.forEach(x =>
    {
        x.Id,
        x.Board,
        x.status

    });
}

Answer 1

делайте так.

data.service.ts

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

@Injectable()
export class DataService {
  public BoardsList: any[] = [
    {
      "Id": "123R",
      "Boards": "TestB",
      "status": 1
    },
    {
      "Id": "345F",
      "Boards": "TestV",
      "status": 0
    }
  ];
  constructor() { }

  getList() {
    return this.BoardsList;
  }

}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  private _listData;

  constructor(
    private _dataService: DataService
  ) {}

  ngOnInit() {
    this._listData = this._dataService.getList();
  }
}

app.component. html

<div class="header">
  <div class="item">Boards</div>
  <div class="item">ID</div>
  <div class="item">Status</div>
</div>

<div class="data"
     *ngFor="let mLSBoards of _listData">
    <div class="data__item">{{mLSBoards.Boards}}</div>
    <div class="data__item">{{mLSBoards.Id}}</div>
    <div class="data__item">{{mLSBoards.status}}</div>
</div>

app.component.s css

.header,
.data {
  display: grid;
  grid-template-columns: auto auto auto;
}

Рабочая демоверсия

сообщите мне, если у вас возникнут какие-либо проблемы.