Получение определенного массива из локального файла json в угловых 5 через ngfor

Question

У меня есть локальный файл json с массивами. Я хочу получить конкретный массив в HTML-документе, хотя я могу получить его в JavaScript, используя цикл for, но как показать это в HTML-документе.

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

Это работает, но проблема в HTML, она не отображается.

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

В консоли также не отображаются ошибки. Любая помощь / подсказка будет оценена. Если есть лучший способ сделать это, пожалуйста, поделитесь.

Answer 1

Сначала используйте файл JSON с помощью HttpClient и подпишите его, а затем поместите содержимое в массив.

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 { }

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));
     }
}

Ваш HTML

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