Can json data be pulled from service into component to display?

New to Angular and I’m trying to follow a tutorial. I’m pulling data into a shared service via an http call but from there I can’t seem to get it into my component to be displayed in a table. I can log the data after it comes into the service so I know the pull is happening, but despite having set up a subscription in my component, the value there remains undefined. I thought I would just start with trying to map a few fields so that I can make sure it’s working before I create the rest… Anyone know what I’m doing wrong? Probably a lot of things 😛

IPix.ts

export interface IPix {
  legacyConfigTrackerId: number;
  contract: IContract;
  selected: boolean;
}

IContract.ts

export interface IContract {
    contractEffectiveDate: string;
}

pix-search.service.ts

@Injectable({
  providedIn: 'root',
})
export class PixSearchService {
  constructor(private http: HttpClient) {}

  pixUrl: string =
    'https://pix.example-dev.example.com/pix?startRow=0&endRow=1';

  getPixData(): Observable<IPix[]> {
    const headers = new HttpHeaders({
      'x-api-key':
        'ewogICAgImFwadgfdgUtleSIgOiAiMTIzIiWQiIDogIlBESSBEZXZlbgdgG9wZXIiCn0=',
    });

    return this.http
      .get<IPix[]>(this.pixUrl, {
        headers,
      })
      .pipe(
        tap((data) => console.log('All:', JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

  handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code:: ${err.status}, error message is: ${err.message}`;
    }

    console.error(errorMessage);
    return throwError(() => errorMessage);
  }
}

pix-table.component.ts

@Component({
  selector: 'pix-table-component',
  templateUrl: 'pix-table.component.html',
  styleUrls: ['pix-table.component.css'],
  providers: [PixSearchService, PixEditDialogComponent],
})
export class PixTableComponent implements IPix, IContract, OnInit, OnDestroy {
  columns = [
    'ID',
    'Network',
    'LOB',
    'HP Code',
    'Atypical',
    'TIN',
    'GNPI',
    'Org',
    'Business Unit Code',
    'National Contract',
    'National ContractType',
    'Contract Type',
    'Super Group',
    'Contract Entity',
    'Contract ID',
    'Amendment ID',
    'Contract Effective Date',
    'Contract Termination Date',
  ];

  rows: any;
  tableSize: TableSize = 'small';
  showHover = true;
  sticky: TableStickyType = 'horizontal';
  scrollType: TableScrollType = 'both';
  label = 'Pix';
  disabled = 'disabled';
  error = 'error';
  maxlength = 'maxlength';
  showCounter = false;

  elevation: CardElevation = 'medium';

  subscription!: Subscription;

  legacyConfigTrackerId!: number;
  terminationDate!: string;
  recordId!: number;
  network!: string;
  lineOfBusiness!: string;
  healthPlanCode!: string;
  isAtypical!: string;
  tin!: string;
  groupNpi!: string;
  org!: string;
  businessUnitCode!: string;
  isNational!: string;
  nationalContractType!: string;
  contractType!: string;
  isSuperGroup!: string;
  contractEntity!: string;
  contractId!: string;
  amendmentId!: string;
  contractEffectiveDate!: string;
  effectiveDate!: string;
  contract!: IContract;
  selected: boolean = false;

  constructor(
    private pixSearchService: PixSearchService,
    private pixEditDialog: PixEditDialogComponent
  ) {}

  pixRecords: IPix[] = [];
  errorMessage: string = '';

  ngOnInit(): void {
    this.subscription = this.pixSearchService.getPixData().subscribe({
      next: (pixRecords) => {
        this.pixRecords = pixRecords;
      },
      error: (err: string) => {
        this.errorMessage = err;
      },
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  open(row: any) {
    this.pixEditDialog.open(row);
  }
}

pix-table.component.html

<div kds-table-scroll [scrollType]="scrollType">
  <kds-table
    [size]="tableSize"
    [showHover]="showHover"
    [striped]="true"
    [sticky]="sticky"
  >
    <thead>
      <tr kds-table-row>
        <th kds-table-heading *ngFor="let col of columns">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr
        kds-table-row
        *ngFor="let row of pixRecords"
        [selected]="row.selected"
        (click)="open(row)"
      >
        <td kds-table-data>{{ row.legacyConfigTrackerId }}</td>
        <td kds-table-data>{{ row.contract.contractEffectiveDate }}</td>
      </tr>
    </tbody>
  </kds-table>
</div>

sample json payload

{
    "totalCount": 1,
    "results": [
        {
            "status": "Active",
            "claimType": "M",
            "payClass": "FLLBCORP",
            "noPayClassReason": "",
            "id": "5df4443a7eefff0710c04760",
            "legacyConfigTrackerId": "217",
            "rateEscalator": "No",
            "product": {
                "healthPlanCode": "FL",
                "orgType": "EX",
                "lineOfBusiness": "EX",
                "businessUnitCode": "EX",
                "programCode": "EX",
                "carrierCode": "EX",
                "network": "Example Network"
            },
            "provider": {
                "groupNpi": "123456789",
                "tin": "123456789",
                "isAtypical": "No",
                "superGroup": ""
            },
            "contract": {
                "type": "Example",
                "name": "Example",
                "emptorisNumber": "47745",
                "amendmentId": "",
                "pixContractType": "Example",
                "effectiveDate": "07/01/2010",
                "isStandard": "Yes",
                "isNational": "Yes",
                "isLessorOf": "Yes",
                "nuances": "",
                "isTimelyFiling": ""
            },
            "changeRequest": {},
            "capitation": {},
            "audit": {
                "createdBy": "Developer",
                "modifiedBy": "Developer",
                "validation": [],
                "created": "05/30/2013 08:31 AM CDT",
                "modified": "09/28/2021 10:44 AM CDT"
            },
            "hnetAudit": {
                "dataValidationValue": ""
            },
            "deleted": "No"
        }
    ]
}