如何将此 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;
  }
}

如果该选项可用referance answer

，您还可以将您的数据放入 typescript 类格式

Answer 2

如果你有 JSON 数据并且你想在页面中显示它。

使用数据表来展示它。

这是您可以看到如何在页面上显示的示例。 请点击Here

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>