如何將此JSON數據加載到Angular2中

Question

我是Angular2的新手，我想加載這個Json數據並在頁面中顯示，我不知道該怎么辦..？ 從所有來源我了解到我制作了一個代碼並將其附加到下面，但由於某些錯誤它沒有運行，任何人都可以幫我修復或為我編寫新代碼，以便我可以從中學習。

先謝謝您的幫助。

我的代碼文件 - student.json

[ { "name": "John", "id_number": "12", "attendance": "276 days", "grade": "A" }, ],這是我的students.service.ts代碼

    import {Injectable} from '@angular/core'; 
    import { Http, Response } from '@angular/http';



    @Injectable()
    export class StudentsService {

    constructor(private http:Http)
    { 
     }

    getStudents() {

    return this.http.get('./students.json')
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();


    }

    }

而且，這是我的students.component.ts文件

    import {Component} from '@angular/core';
    import { Http, Response } from '@angular/http';
    import {StudentsService} from './students.service'; 
    import 'rxjs/add/operator/map'
    import 'rxjs/Rx';

    @Component({
    selector: 'students',
    templateUrl: 'students.html',
    styleUrls: ['./students.scss']
     }) 
     export class students    {

       public students;

        constructor( private _studentsService:StudentsService, private     http:Http)
        {
          this.students = this._studentsService.getStudents();
            }
        ngOnInit() {
         this._load();
         }

         private _load() {
         this.students = this._studentsService.getStudents();

         }

         }

Answer 1

您可以編寫一個服務來從json文件加載您的html，並在您的應用程序中提供，如下所示。

@Injectable()
export class ConfigService {
  public config: any;
  private configObs: Observable<any>;

  constructor(private http: Http) {
   }

  public load(filename: string): Observable<any> {
    if ( this.config ) {
      return Observable.of(this.config);
    } else {
      this.configObs = this.http.get(filename).map((res) => {
        this.config = this.config || res.json() || {};
        return this.config;
      });
    }

    return this.configObs;
  }
}

你也可以把你的數據在打字稿類格式，如果該選項可用全球化志願服務青年答案

Answer 2

如果您有JSON數據，並且想要在頁面中顯示它。

使用數據表來顯示它。

以下是您可以看到如何在頁面上顯示的示例。 請點擊這里

Answer 3

將我們的json分配給變量

 myData = [{
             "name": "John",
             "id_number": "12",
             "attendance": "276 days",
             "grade": "A"
          },
          ...
          ...
         ],

在你的Html中

<ul>
     <li *ngFor="let data of myData">
         <div>{{data.name}}</div>
         <div>{{data.id_number}}</div>
         <div>{{data.attendance}}</div>
         <div>{{data.grade}}</div>
     </li>
</ul>

希望能幫助到你

Answer 4

您正在處理的是一個Observable students ，要么您需要手動subscribe該observable，要么使用模板中的異步管道來處理您的訂閱。

此外，您現在正在構造函數和OnInit執行兩次請求。 刪除其中一個，我將刪除構造函數中的那個，因為我喜歡保持一切遠離構造函數，這不需要在那里，如下所述： https ： //stackoverflow.com/a/35763811/ 6294072

回到訂閱...要么：

this.students = this._studentsService.getStudents();

<div *ngFor="let student of students | async">
  <p>{{student.name}}</p>
  <!-- ... -->
</div>

要么：

this._studentsService.getStudents()
  .subscribe(students => {
     this.students = students;
  })

  <div *ngFor="let student of students">
    <p>{{student.name}}</p>
    <!-- ... -->
  </div>