Question

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

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

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

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

项目视图

projects.html

＆＃13;

 <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>

＆＃13;

项目-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

＆＃13;

<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>

＆＃13;

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}]);
    }
}

issues.compnent.ts中的console.log（）返回数据，而列表视图为空白，如上面的屏幕截图所示。任何人都可以帮我解决这个问题吗？提前致谢。

Answer 1

在.collection-item-text { height: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 300; color: #404d57; }中，您未指定ngOnInit新值

因此，请务必使用this.issues功能

callback

Answer 2

在更新数据时刷新radlistview本机脚本 radlistview刷新 <RadListView #myListView></RadListView>

@ViewChild("myListView") listViewComponent: RadListViewComponent; //每当您更新 dataItems 中的数据时，都使用此功能 this.listViewComponent.listView.refresh();

Nativescript listview未在特定视图上更新

2 个答案: