Angular help for Reddit question https://www.reddit.com/r/angular/comments/buwret/having_serious_trouble_figuring_out_how_to_handle/

app.component.html

<h1>Product Records</h1>

<div *ngFor="let record of productRecords | async">
  {{record.itemNumber}}
</div>

app.component.ts

import {Component, OnInit} from '@angular/core';
import {ProductRecords, ProductService} from './product.service';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'sandox';
  public productRecords: Observable<ProductRecords>;
  private id = 1;

  constructor(private product: ProductService) {
  }

  ngOnInit(): void {
    this.productRecords = this.product.getProduct(this.id);
  }


}

product-service.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {map} from 'rxjs/operators';

export interface IProductRecord {
  serial: string;
  itemNumber: string;
  transferNumber: string;
  transferDate: string;
  transferCode: string;
  location: string;
}

export type ProductRecords = IProductRecord[];

interface ProductRecordResource {
  SERIAL: string;
  ITEM: string;
  TRNUMBER: string;
  TRDATE: string;
  TRCODE: string;
  LOCATION: string;
}

type ProductRecordsResponse = ProductRecordResource[];

export class ProductRecord implements IProductRecord {
  serial: string;
  itemNumber: string;
  transferNumber: string;
  transferDate: string;
  transferCode: string;
  location: string;

  constructor(serial, itemNumber, transferNumber, transferDate, transferCode, location) {
    this.serial = serial;
    this.itemNumber = itemNumber;
    this.transferNumber = transferNumber;
    this.transferDate = transferDate;
    this.transferCode = transferCode;
    this.location = location;
  }
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) {
  }

  getProduct(id: number): Observable<ProductRecords> {
    return this.requestProduct(id).pipe(
      map(data => {
        return data.map(record => {
          return new ProductRecord(
            record.SERIAL,
            record.ITEM,
            record.TRNUMBER,
            record.TRDATE,
            record.TRCODE,
            record.LOCATION
          );
        });
      })
    );
  }

  private requestProduct(id: number): Observable<ProductRecordsResponse> {
    return this.http.get<ProductRecordsResponse>(`api-endpoint/products/${id}`)
  }
}