已解决

Question

花了很多时间只是为了将数据从API显示到ListView，没有运气。

_batches正在从API获取JSON，我已经使用console.log对其进行了检查，因此JSON或网络端都没有错误。不过，ListView中没有显示任何数据。

所有内容都被视为undefined，请在模拟器上进行检查。

使用NS + Angular：截至2018年10月30日的所有最新软件包

这是组件代码的重要部分

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { Batch } from "../../shared/batch.model";
import { BatchesService } from "../../shared/batches.service";
import { finalize } from 'rxjs/operators';

@Component({
  selector: "ns-batches",
  moduleId: module.id,
  templateUrl: "./batches.component.html",
})

export class BatchesComponent implements OnInit {
  public _batches: ObservableArray < Batch > = new ObservableArray < Batch > ([]);

  constructor(private _batchesService: BatchesService) {}

  ngOnInit(): void {

    this._batchesService.load()
      .pipe(finalize(() => this._isLoading = false))
      .subscribe((batches: Array < Batch > ) => {
        this._batches = new ObservableArray(batches);
      });
  }

这是组件html文件

<StackLayout class="page">
  <ListView [items]="_batches" class="list-group" id="listBatches">
    <ng-template let-result="item">
      <GridLayout columns="100, *" rows="auto, auto,auto,auto" horizontalAlignment="left" verticalAlignment="top" backgroundColor="#CCCCCC">
        <img row="0" col="0" rowSpan="2" [src]="result.imageURL">
        <Label row="0" col="1" [nsRouterLink]="['/item', result.id]" [text]="'ID : ' + result.id" class="h3"></Label>
        <Label row="1" col="1" [text]="'Booked: ' + result.course" class="list-group-item"></Label>
        <Label row="2" col="1" [text]="'Oral: ' + result.oralconfirm" class="list-group-item"></Label>
        <Label row="3" col="0" colSpan="2" [text]="'Interested : ' + result.interested" class="list-group-item"></Label>
      </GridLayout>
    </ng-template>
  </ListView>
</StackLayout>

这是来自服务文件

import { Injectable } from "@angular/core";

import { Http, Headers, Response, RequestOptions } from "@angular/http";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map } from "rxjs/operators";
import { Observable } from 'rxjs';
import {Component, NgZone} from '@angular/core';

import { Batch } from "./batch.model";

@Injectable()
export class BatchesService {

  private _batches = new Array < Batch > ();

  constructor(private http: Http) {}

  public load(): Observable < Batch[] > {
    return this.http.get('https://appspages.something.com/something/test')
      .pipe(map(res => res.json()));
  }
}

已解决

添加解决方案，

终于成功了！问题出在JSON中。这是详细信息- 我的JSON结构为：

{
  "records": [{
      data of record 1
    },
    {
      data of record 2
    },
    {
      data of record 3
    },
    {
      data of record n
    }
  ]
}

我必须删除文本

{
  "records":

从JSON的开头到结尾的}。

此修改后的JSON运作良好。

不确定是否有如上所述的呈现JSON的解决方案。如果您知道解决方案，请在下面发布。

Sidd，非常感谢您的帮助！你真了不起！

Answer 1

从ListView items属性的文档开始，需要一个数组而不是一个Observable数组。

this._batches = batches;应该这样做。您不需要this._batches = new ObservableArray(batches);

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { Batch } from "../../shared/batch.model";
import { BatchesService } from "../../shared/batches.service";
import { finalize } from 'rxjs/operators';

@Component({
  selector: "ns-batches",
  moduleId: module.id,
  templateUrl: "./batches.component.html",
})

export class BatchesComponent implements OnInit {
  public _batches: Batch[];

  constructor(private _batchesService: BatchesService) {}

  ngOnInit(): void {

    this._batchesService.load()
      .pipe(finalize(() => this._isLoading = false))
      .subscribe((batches: Batch[]) => {
        this._batches = batches;
      });
  }

此外，您应该使用HttpClient而不是Http来不必在BatchesService中的.json中调用.map：

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map } from "rxjs/operators";
import { Observable } from 'rxjs';
import { Component, NgZone } from '@angular/core';
import { Batch } from "./batch.model";

@Injectable()
export class BatchesService {

  private _batches = new Array<Batch>();

  constructor(private http: HttpClient) {}

  public load(): Observable<Batch[]> {
    return this.http
      .get<Batch[]>('https://appspages.something.com/something/test');
  }
}

这是您推荐的NativeScript Playground Sample。

更新：

在模板中，您只需执行以下操作即可处理要获取的数据：

<ListView [items]="_batches.records" class="list-group" id="listBatches">

NativeScript Angular Observable ListView不显示数据

已解决

1 个答案:

更新：