Angular 如何从服务中填充列表数据

我对Angular非常陌生，我有一个列表需要在屏幕上显示，我可以用硬编码数据显示列表，但我需要从调用API的服务中获取数据，这部分也完成了。我的问题是如何用它替换硬编码

我的列表有3列：Boards-Id-Status

 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>

我试图创建一个从服务返回列表的方法，但不确定如何返回（此代码不起作用，但This.Agent.Boards有我需要的3个字段，我也在这里导入了服务）

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

    });
}

像这样做

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>

---

如果您遇到任何问题，请告诉我。

谢谢，这是一个很大的帮助，我在服务中的方法签名类似于getRealEstateAgent（请求：GetRealEstateAgentRequest）：可观察如何生成请求？并导出接口GetRealEstateAgentRequest{guid:string；}

<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>

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