ngFor inside ngFor does not work

Question

I’m trying to access the data with ngfor but I can’t. How should I access each data with ngfor?

json:

    [
  {
    "id": 1,
    "name": "Programas",
    "base_Url": "http://uol.com.br",
    "order": 0,
    "programs": [
      {
        "id": 56,
        "name": "Programa 1",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 57,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 58,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  },
  {
    "id": 2,
    "name": "Jornalísticos",
    "base_Url": "http://uol.com.br",
    "order": 1,
    "programs": [
      {
        "id": 59,
        "name": "Programa 2",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 60,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 61,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  }
]

method in service:

  list() {
    return this.http.get<Program[]>(this.API)
    .pipe(
      tap(console.log)
    )

  }

component:

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";

import { ProgramsService } from "./../shared/programs.service";
import { Program } from "../model/program";

@Component({
  selector: "app-programs-list",
  templateUrl: "./programs-list.component.html",
  styleUrls: ["./programs-list.component.scss"]
})
export class ProgramsListComponent implements OnInit {
  programs: Program[];
  //programs$:Observable<Program>

  constructor(private service: ProgramsService) {}

  ngOnInit() {
    this.service
      .list()
      .subscribe(dados => (this.service = dados));
  }
}

html:

<div class="container">
  <div class="row" *ngFor="let program of programs; let i = index">
    <div class="col-sm" *ngFor="let programVerdadeiro of program.programs" >
      <img src="https://fakeimg.pl/200/" alt="" />
      <h3>{{programVerdadeiro.name}}</h3>
      <h4>segunda a sexta | 20h25</h4>
    </div>
  </div>
</div>

Answer 1

You are instantiating this.programService instead of this.programs.

ngOnInit() {
 this.programsService 
     .getPrograms() 
     .subscribe(dados => (this.programs = dados)); 
}

Answer 2

From what I understand you are wanting to access the objects of the following type:

...
{
  "id": 59,
  "name": "Programa 2",
  "base_Url": "https://google.com",
  "active": true,
  "menu_id": 2
},
...

To access them you will have to do two *ngFor, in the example below I did with forEach, but just adapt.

const programs =  [
  {
    "id": 1,
    "name": "Programas",
    "base_Url": "http://uol.com.br",
    "order": 0,
    "programs": [
      {
        "id": 56,
        "name": "Programa 1",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 57,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 58,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  },
  {
    "id": 2,
    "name": "Jornalísticos",
    "base_Url": "http://uol.com.br",
    "order": 1,
    "programs": [
      {
        "id": 59,
        "name": "Programa 2",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 60,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 61,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  }
]

programs.forEach(program => {
  program.programs.forEach(programVerdadeiro => console.log(programVerdadeiro))
})

In Angular I think it would look something like;

<div class="container">
  <div class="row">
    <div class="col-sm" *ngFor="let program of programs; let i = index">
      <div*ngFor="let programVerdadeiro of program.programs">
        <img src="https://fakeimg.pl/200/" alt="" />
        <h3>{{programVerdadeiro.name}}</h3>
        <h4>segunda a sexta | 20h25</h4>
      </div>
    </div>
  </div>
</div>

OBS: then change the name of the variables, I put with these names just to facilitate understanding.