Question

我努力将我的解析器中的数据转换为组件。它总是返回null。

我可以看到它是从我的服务器获取数据，也正确显示页面模板，没有错误，但它没有访问数据。

student.component.ts

import { Component, ViewChild } from '@angular/core';
import {MdPaginator, MdSort} from '@angular/material';

import { Student, StudentService } from '../shared';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: "student",
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.scss']
})

export class StudentComponent {
  constructor (
    private route: ActivatedRoute,
    private studentService: StudentService,
    private router: Router,
  ) {}

  students: Student[];

  displayedColumns = ['userId', 'userName', 'progress'];

  @ViewChild(MdPaginator) paginator: MdPaginator;
  @ViewChild(MdSort) sort: MdSort;

  ngOnInit() {
    // Retreive the prefetched students
    this.route.data.subscribe(
      (data: { students: Student[] }) => {
        this.students = data.students;
      }
    );

    console.log(this.students);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyAngularMaterialModule, HeaderComponent, SidebarComponent, ApiService, SharedModule } from './shared';
import { ActivityModule, ActivityComponent } from './activity';
import { StudentModule, StudentComponent } from './student';

import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { StudentResolver } from "./student/student-resolver.service";
import {StudentService} from "./shared/services/student.service";


const routes: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'student',
    component: StudentComponent,
    data: {
      title: 'Students'
    },
    resolve: {
      students: StudentResolver
    }
  },
  {
    path: 'activity',
    component: ActivityComponent,
    data: {
      title: 'Activities'
    }
  },
  { path: '',   redirectTo: '/student', pathMatch: 'full' },
]);

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyAngularMaterialModule,
    SharedModule,
    ActivityModule,
    StudentModule,
    routes
  ],
  providers: [ApiService, StudentService, StudentResolver],
  bootstrap: [AppComponent]
})
export class AppModule { }

学生resolver.service.ts

import { Injectable, } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { Student, StudentService } from '../shared';

@Injectable()
export class StudentResolver implements Resolve<Student> {
  constructor(
    private studentService: StudentService,
    private router: Router
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    return this.studentService.query()
           .catch((err) => this.router.navigateByUrl('/'));

  }
}

我没有把我的student.service.ts放在这里工作并获取数据（我可以在google chrome网络标签上看到它）。我错过了什么？

谢谢！

UPDATE：_______________________________

我的服务器正在返回以下数据：

[
    {
        "name": "Luiz Mitidiero",
        "lastActive": "2017-06-05T08:40:51.620Z",
        "activitiesCompleted": 12,
        "performance": 89.85
    },
    {
        "name": "Jan",
        "lastActive": "2017-05-28T08:40:51.620Z",
        "activitiesCompleted": 5,
        "performance": 78.4
    },
    {
        "name": "Katie",
        "lastActive": "2017-06-13T08:40:51.620Z",
        "activitiesCompleted": 20,
        "performance": 99.99
    }
]

使用Angular 4从Resolver获取数据到组件中

0 个答案: