通过ngfor从Angular 5的本地json文件中获取特定数组

Question

I've local json file having arrays. I want to get specific array in html document although i can get it in javascript using for loop but how to show this in html document.

for (let i = 0; i < data.static_data.model.length; i++) {
  console.log(data.static_data.model[i]);
}

This works but problem is in HTML, it's not displaying.

<li *ngFor="let model of data; let i = index"> {{ model.static_data.model[i] }}</li>

It also don't show any error in console. Any help/hint will be appreciated. If there is better way to do this, Kindly share.

Answer 1

Firstly consume the JSON file using HttpClient and subscribe it and then push the contents into an array.

The AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; 
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, HttpClientModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

The AppComponent

import {Component} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app'
})
export class AppComponent implements ngOnInit {

  public YourModel : any;

  ngOnInit() : void
  {
       this.getJSONFromLocal().subscribe(
          data => {
                    //Bind the data emitted by JSON file to model class here
                    this.YourModel = data;
                  },
          error => console.error(`Failed because: ${error}`));
  }

  constructor(private httpClient: HttpClient) {}

  public getJSONFromLocal(): Observable<any> {
         return this.httpClient.get("./someLocalFile.json")
                         .catch((error:any) => console.log(error));
     }
}

Your HTML

<li *ngFor="let model of YourModel;">model.someProperty</li>