NativeScript Angular2中解析JSON嵌套数组并在ListView展示marks值

没问题，我来一步步帮你搞定这个需求，咱们从服务、组件到模板逐个环节梳理清楚：

首先我们需要一个服务来读取students.json里的数据，这里用Angular的HttpClient来做网络请求。记得先在你的AppModule里导入HttpClientModule哦，不然服务里没法用HttpClient。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  constructor(private http: HttpClient) {}

  // 获取学生成绩数据
  getStudentMarks(): Observable<any> {
    // 假设你的students.json放在assets文件夹下，路径根据实际情况调整
    return this.http.get('./assets/students.json');
  }
}

接下来在组件里注入刚才写的服务，调用方法获取数据，然后从marks数组里提取我们需要的first、second、third字段，存到组件的变量里供模板使用。

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 用来存储提取后的成绩列表
  studentMarks: Array<{first: number, second: number, third: number}> = [];

  constructor(private appService: AppService) {}

  ngOnInit(): void {
    // 订阅服务返回的数据
    this.appService.getStudentMarks().subscribe((response: any) => {
      // 假设你的JSON结构是 { marks: [...] }，遍历marks数组提取需要的字段
      this.studentMarks = response.marks.map((item: any) => ({
        first: item.first,
        second: item.second,
        third: item.third
      }));
    });
  }
}

最后在模板里用*ngFor指令循环我们处理好的成绩列表，把每个项的三个值展示出来。这里给你两种常见的写法：

普通HTML列表 #

<ul class="student-marks-list">
  <li *ngFor="let marks of studentMarks">
    第一科: *{{ marks.first }}* | 第二科: *{{ marks.second }}* | 第三科: *{{ marks.third }}*
  </li>
</ul>

Angular Material ListView（如果用了Material组件库） #

<mat-list>
  <mat-list-item *ngFor="let marks of studentMarks">
    <span matListItemTitle>学生成绩</span>
    <span matListItemLine>第一科分数: *{{ marks.first }}*</span>
    <span matListItemLine>第二科分数: *{{ marks.second }}*</span>
    <span matListItemLine>第三科分数: *{{ marks.third }}*</span>
  </matListItem>
</mat-list>

几个注意点： #

• 确认students.json的路径正确，一般放在assets目录下是最稳妥的，Angular打包时会把这个目录的文件包含进去
• 一定要在AppModule的imports数组里添加HttpClientModule，否则HttpClient会报错
• 如果你的JSON结构里marks数组的每个元素还有其他字段，上面的map方法只会提取我们需要的三个，完全不影响其他数据

内容的提问来源于stack exchange，提问作者Stephen