Я написал это вчера, но сегодня я изменил так много кода. Я переписал свой вопрос:
У меня есть приложение NativeScript с Angular, использующее шаблон TabView, и форму входа, использующую модальныйизначально окно над вкладками, и это, кажется, работает нормально - форма входа не имеет вкладок, и при входе в систему меня переводят в TabView.
При успешном входе в систему я хочу вызывать методы в компонентах с вкладками и обновлятьсоответствующие шаблоны с содержанием, относящимся к зарегистрированному пользователю.
Например, одним из них является список пользовательских отчетов.
Я пытаюсь получить список пользовательских отчетов с нашего сервера и отобразить этот список в reports.component.html, вызвав службу из обработчика успеха в login.component.ts, а затем получив доступ к нему в reports.component..ts
В login.component.ts у меня вверху
...
import { User } from "../shared/user/user.model";
import { UserService } from "../shared/user/user.service";
import { ReportsComponent } from "../reports/reports.component";
import { UpdateService } from "../shared/update.service";
...
...
@Component({
selector: 'login',
moduleId: module.id,
providers: [UserService, ReportsComponent, ReportService, UpdateService ],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
...
В конструкторе у меня есть
private userService: UserService,
private repts: ReportsComponent,
private reportService: ReportService,
private updateService: UpdateService,
Тогда у меня есть
public login() {
this.userService.login(this.user)
.subscribe(
(data) => {
//console.log("login data in component = "+JSON.stringify(data));
if (data.authenticated==false) {
ApplicationSettings.setBoolean("authenticated", false);
alert("Unfortunately we could not log you in: "+data.message);
} else if (data.authenticated==true) {
ApplicationSettings.setBoolean("authenticated", true);
ApplicationSettings.setString("token", data.token);
console.log("authenticated="+ApplicationSettings.getBoolean("authenticated"));
console.log("Login success! token="+data.token);
console.log("calling updateReports from update.service.ts");
this.updateReports();
//this.expense.populate_reports(this.expense);
//this.expense.populate_categories(this.expense);
this.modalDialogParams.closeCallback(() => console.log('Login modal closed'));
}
},
(error) => alert("Unfortunately we could not log you in.")
);
}
public updateReports() {
this.updateService.getReports()
.subscribe(
(data) => {
//console.log("report data in login component = "+JSON.stringify(data));
},
(error) => alert("Problems...")
);
}
В update.service.ts у меня есть
@Injectable()
export class UpdateService {
private _expenses: ObservableArray<Expense>;
private reportDataSource = new Subject<string>(); // Source
reportData$ = this.reportDataSource.asObservable(); // Stream
constructor(private http: Http) { }
getReports() {
console.log("in updateService getReports");
let url = Config.apiUrl + "ns_get_reports.php";
//console.log(url);
return this.http.get(
url,
{ headers: this.getCommonHeaders() }
).pipe(
map(this.extractData),
tap(data => {
//alert("oi");
this.reportDataSource.next(data);
//console.log("reports listing in update service = "+JSON.stringify(data));
}),
catchError(this.handleErrors)
);
}
getCommonHeaders() {
let headers = new Headers();
let token=ApplicationSettings.getString("token");
headers.append("Content-Type", "application/json");
headers.append("token", token);
return headers;
}
handleErrors(error: Response) {
console.log(JSON.stringify(error.json()));
return Observable.throw(error);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
}
Тогда в reports.component.ts у меня есть
export class ReportsComponent implements OnInit {
//private report: Report;
private _reports: ObservableArray<Report>;
private _expenses: ObservableArray<Expense>;
header: string;
report_status: Array<String>;
subscription: Subscription;
constructor(private router: Router,
private reportService: ReportService,
private expenseService: ExpenseService,
private _changeDetectionRef: ChangeDetectorRef,
private updateService: UpdateService) {
this._reports = new ObservableArray<Report>();
this.subscription = updateService.reportData$.subscribe(
(res) => {
console.log("reports listing in reports component = "+JSON.stringify(res));
let data=JSON.parse(JSON.stringify(res));
if (data["reports"]=="No Reports") {
// No reports to show
} else {
var status_text;
var status_class;
for (let i = 0; i < data.reportid.length; i++) {
var status_codes=this.displayReportStatus(data.report_status[i]);
status_text=status_codes[0];
status_class=status_codes[1];
this._reports.push(new Report(data.reportid[i], data.report_name[i], data.report_status[i], data.report_value[i], status_text, status_class, data.report_justification));
}
this._changeDetectionRef.markForCheck();
if (!this._changeDetectionRef['destroyed']) {
this._changeDetectionRef.detectChanges();
}
}
}
);
}
public get reports(): ObservableArray<Report> {
return this._reports;
}
Строка
console.log("reports listing in reports component = "+JSON.stringify(data));
без проблем выводит данные отчетов, поэтому служба возвращает правильные данные.
Однако шаблон не отображает отформатированный список отчетов.Это пусто.Шаблон выглядит так:
<!--
<RadListView [items]="reports" (itemTap)="onReportItemTap($event)" >
//-->
<RadListView [items]="reports" >
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
<StackLayout class="reportStackLayout" orientation="vertical">
<Label class="labelName blue_text bold_text list-group-item" [nsRouterLink]="['../report', item.reportid]" [text]="item.report_name"></Label>
<GridLayout class="reportDetailsGridLayout" columns="*, *">
<Label row="0" col="0" horizontalAlignment="left" [class]="item.status_class" class="labelStatus" [text]="item.status_text" textWrap="true"></Label>
<Label row="0" col="1" horizontalAlignment="right" class="labelValue green_text bold_text" [text]="item.report_value" textWrap="true"></Label>
</GridLayout>
</StackLayout>
</StackLayout>
</ng-template>
</RadListView>
</GridLayout>
Любые идеи, что я делаю неправильно.
Надеюсь, я достаточно объяснил - пожалуйста, дайте мне знать, если мне нужно что-то уточнитьдалее.
Спасибо.
РЕДАКТИРОВАТЬ: 9 октября.
Вот так выглядит reports.component.ts, как и сейчас.По-прежнему не обновляется представление.
import { Component, ChangeDetectorRef, OnInit } from "@angular/core";
import { ReportComponent } from "./report.component";
import { Report } from "../shared/report/report.model";
import { Expense } from "../shared/expense/expense.model";
import { ReportService } from "../shared/report/report.service";
import { ExpenseService } from "../shared/expense/expense.service";
import { UpdateService } from "../shared/update.service";
import { Subject, Subscription } from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Page } from "tns-core-modules/ui/page";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { ListViewEventData } from "nativescript-ui-listview";
import { RadListView } from "nativescript-ui-listview";
import { RouterExtensions } from "nativescript-angular/router";
import * as ApplicationSettings from "application-settings";
import {getBoolean, setBoolean, getNumber, setNumber, getString, setString, hasKey, remove, clear} from "tns-core-modules/application-settings";
import { Injectable } from "@angular/core";
declare var module: {
id: string;
}
@Component({
selector: "Reports",
moduleId: module.id,
providers: [ReportService, ExpenseService, UpdateService],
templateUrl: "./reports.component.html",
styleUrls: ["./reports.component.css"]
})
export class ReportsComponent implements OnInit {
//private report: Report;
private _reports: ObservableArray<Report>;
private _tempreports: ObservableArray<Report>;
private _expenses: ObservableArray<Expense>;
header: string;
report_status: Array<String>;
isLoading = true;
foo: string;
private listView: RadListView;
subscription: Subscription;
constructor(private router: Router,
private route: ActivatedRoute,
private reportService: ReportService,
private expenseService: ExpenseService,
private _changeDetectionRef: ChangeDetectorRef,
private updateService: UpdateService) {
this.subscription = this.updateService.reportData$.subscribe(
(res) => {
console.log("isLoading="+this.isLoading);
console.log("reports listing in reports component = "+JSON.stringify(res));
this._reports = new ObservableArray<Report>();
this._tempreports = new ObservableArray<Report>();
let data=JSON.parse(JSON.stringify(res));
if (data["reports"]=="No Reports") {
// No reports to show
} else {
var status_text;
var status_class;
for (let i = 0; i < data.reportid.length; i++) {
var status_codes=this.displayReportStatus(data.report_status[i]);
status_text=status_codes[0];
status_class=status_codes[1];
this._tempreports.push(new Report(data.reportid[i], data.report_name[i], data.report_status[i], data.report_value[i], status_text, status_class, data.report_justification));
}
this._reports = this._tempreports;
this._changeDetectionRef.markForCheck();
if (!this._changeDetectionRef['destroyed']) {
this._changeDetectionRef.detectChanges();
}
this.isLoading=false;
//this.listView.refresh();
console.log("isLoading="+this.isLoading);
}
}
);
}
onListLoaded(args) {
console.log("In onListLoaded");
this.listView = args.object;
this.listView.refresh();
}
public get reports(): ObservableArray<Report> {
//console.log("Where are the focking reports");
return this._reports;
}