Why can I not get output in my html from ngFor?

Question

I have a simple local JSON. It's

{ list: [{value: value, value: value ...},{},{},{},{},{},{},{}]},

so the JSON should be valid right? I just can't seem to get it out to the ngFor in my html... Is there any way to log what is output in the ngFor in the html? .. like inline console.log or something? Or maybe I'm doing something else wrong. here is an excerpt of my code:

local JSON formatted like (has actual data of course..):

{ list: [{value: value, value: value ...},{},{},{},{},{},{},{}]}

list-typings.d.ts (in same folder as list.json - is this correct? Should I import it?):

declare module "*.json" {
  const value: any;
  export interface list {
    id: number;
    name: string;
    age: number;
    interests: string;
  }
}

My table.component.ts:

import { Component, OnInit } from "@angular/core";
import list from "./../../assets/list.json";

console.log(list);

@Component({
  selector: "app-table",
  templateUrl: "./table.component.html",
  styleUrls: ["./table.component.css"],
})
export class TableComponent implements OnInit {
  listList: any = list.arrayKey;

  constructor() {
    console.log(this.arrayKey);
  }

  ngOnInit(): void {}
}

Now I should be able to do *ngFor="let list of listList" and the get all {{list.name}} inline in my html right? I've tried so many variants, but I can not get any output...

Answer 1

Your template would look like this:

<ng-container *ngFor="let list of listList">
    <span>{{list.someKey}}</span>
</ng-container>

Also, make sure that listList is declared in your component. It should be an array and public.