Nativescript 列表视图未在特定视图上更新

Question

我正在开发一个应用程序来显示与项目相关的问题列表。 App流程解释如下：

用户登录应用程序。
列出项目列表的列表视图（工作正常）。
单击项目单元格时，将加载与相应项目相关的问题。（即使问题显示在日志中也不起作用）。

项目和问题都以相同的方式列出，我找不到问题视图有什么问题，因为我得到的是空白屏幕而不是列表视图。

当我通过评论项目服务 API 从项目组件调用问题服务 API 时，我使用问题列表更新了项目列表视图。问题服务是项目视图实现文件的精确副本，但它似乎仍然没有解决。附加两个视图的代码。

项目视图

projects.html

 <GridLayout> 
       <ListView [items]="projects" class="small-spacing"        (itemTap)="onItemTap($event)">
           <template let-item="item">
              <Label [text]="item.projectName" class="medium-spacing">      </Label>
           </template>
       </ListView>
</GridLayout>

项目-list.service.ts

import {Injectable} from "@angular/core";
import {Projects} from "./projects";
import {ApiBase} from "../../shared/apiBase/apibase";
import {Config} from "../utils/config"
import {User} from "../user/user";

var applicationSettings = require("application-settings");

@Injectable()
export class ProjectsService extends ApiBase {
 apiBase : ApiBase;

 loadProjects(callBack: (responseObject:any, authDetails: String)=>any) {

     var url =Config.BASE_URL + "/projects.json";
    console.log("URL -" + url);
    console.log("Auth -" + Config.AUTH_DATA_KEY);
    this.getRequest(Config.AUTH_DATA_KEY, url, callBack);

}

fetchIssues(callBack: (responseObject:any, authDetails: String)=>any) {

     var url =Config.BASE_URL + "/issues.json?project_id=215" ;
    console.log("URL -" + url);
    console.log("Auth -" + Config.AUTH_DATA_KEY);
    this.getRequest(Config.AUTH_DATA_KEY, url, callBack);

} }

projects.component.ts

import {Component, OnInit} from '@angular/core';
import observable = require("data/observable");
import {Projects} from "../../shared/projects/projects";
import {ProjectsService} from "../../shared/projects/projects-list.service";
import {Router} from "@angular/router-deprecated";

var EventBus = require('eventbusjs');
@Component({
  selector: "projects",
  providers: [ProjectsService],
  templateUrl: "views/projects/projects.html",
  styleUrls: ["views/projects/projects.css"],
})
export class ProjectsPage implements OnInit {
  projects = [];
  constructor(private _projectsService: ProjectsService, private _router: Router) {}

ngOnInit() {
 let projectsList = this.projects;
 var callback = function callback(response) {

  JSON.parse(response.content).projects.forEach(project => {
    projectsList.push(new Projects(project.id, project.name));
    console.log("project.name - " + project.name);
  })
}
   this._projectsService.loadProjects(callback);


 }
  public onItemTap(args) {
    console.log("------------------------ ItemTapped: " + this.projects[args.index].id);
    this._router.navigate(["IssuesList", {projectID : this.projects[args.index].id}]);
 }
}

问题视图相关的文件也类似。但是由于未显示列表视图，我无法弄清楚问题视图有什么问题。与问题视图相关的文件如下。

issues.html

<GridLayout>
  <ListView [items]="issues" class="small-spacing" (itemTap)="onItemTap($event)">
    <template let-issue="issue">
      <Label [text]="issue.issueSubject" class="medium-spacing"></Label>
    </template>
  </ListView>
</GridLayout>

isseus-list.service.ts

import {Injectable} from "@angular/core";
import {Issues} from "./issues";
import {ApiBase} from "../../shared/apiBase/apibase";
import {Config} from "../utils/config"

var applicationSettings = require("application-settings");

@Injectable()
export class IssuesService extends ApiBase {
  apiBase : ApiBase;

  fetchIssues(callBack: (responseObject:any, authDetails: String)=>any) { 
     var url =Config.BASE_URL + "/issues.json?project_id=215" ;
    console.log("URL -" + url);
    console.log("Auth -" + Config.AUTH_DATA_KEY);
    this.getRequest(Config.AUTH_DATA_KEY, url, callBack);
  }
}

issues.component.ts

import {Component, OnInit} from '@angular/core';
import observable = require("data/observable");
import {Issues} from "../../shared/issues/issues";
import {IssuesService} from "../../shared/issues/issues-list.service";
import {Router} from "@angular/router-deprecated";

var EventBus = require('eventbusjs');
@Component({
  selector: "issues",
  providers: [IssuesService],
  templateUrl: "views/issues/issues.html",
  styleUrls: ["views/issues/issues.css"],
})
export class IssuesPage implements OnInit{
  issues = [];
  constructor(private _issuesService: IssuesService, private _router: Router) {}

ngOnInit() {
    let issuesList = this.issues;
    var i = 0;
    var callback = function callback(response) {

      JSON.parse(response.content).issues.forEach(issue => {
     issuesList.push(new Issues(issue.id, issue.status.name, issue.tracker.name, issue.tracker.name));
    console.log("issue.name - " + issuesList[i].projectName);
    i++;
      })
    }
    this._issuesService.fetchIssues(callback);
  }
   public onItemTap(args) {
        console.log("------------------------ ItemTapped: " + this.issues[args.index].id);
    //this._router.navigate(["IssuesList", {projectID : this.issues[args.index].id}]);
    }
}

console.log() in issues.compnent.ts returns 列表视图如上图所示为空白时的数据。谁能帮我解决这个问题？提前致谢。

Answer 1

在您的 ngOnInit 中，您没有分配给 this.issues 新值

所以请确保在 callback 函数中执行

...
issues = [];
var self = this;
...

   var callback = function callback(response) {

      JSON.parse(response.content).issues.forEach(issue => {
     issuesList.push(new Issues(issue.id, issue.status.name, issue.tracker.name, issue.tracker.name));

    self.issues = issuesList;

    i++;
      })
    }
    this._issuesService.fetchIssues(callback);
  }

Answer 2

在更新数据时刷新 radlistview nativescript radlistview刷新 <RadListView #myListView></RadListView>

@ViewChild("myListView") listViewComponent: RadListViewComponent; //每当你更新 dataItems 中的数据时使用它 this.listViewComponent.listView.refresh();

Nativescript 列表视图未在特定视图上更新

Nativescript listview not updating on a particular view

mobile

listview

typescript

nativescript

angular