ngOninit not getting called angular 2 express

我不知道但是，发生了一些奇怪的事情，我提到了在“Angular.io”上提供的默认代码来执行角度服务调用，但是一些ngOninit方法没有被调用。我也从OnInit实现了组件。并将@Injectable添加到user.services.ts。但仍然不知道我在哪里出错。
以下是参考代码。ngOninit not getting called angular 2 express

app.component.ts

//app.components.ts 

import { Component } from '@angular/core'; 
import {User} from './user'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
title = 'Society CRM'; 
}

user.ts

export class User 
{ 
    _id : string; 
    name: string; 
    email: string; 
    username: string; 
    password: string; 
    phone: string; 
    address: string; 
    role: string; 
    created_date: string; 
}

用户list.component.ts

import {Component,OnInit} from '@angular/core'; 
import {User} from './user'; 
import {UserService} from './user.service'; 
import { Headers, RequestOptions } from '@angular/http'; 
@Component({ 
selector:'user-list', 
templateUrl:'./user-list.html', 
providers: [ UserService ] 
}) 

export class UserListComponent implements OnInit{ 
errorMessage: string; 
users: User[]; 
mode = 'Observable'; 
constructor (private userService: UserService) {}; 
ngOnInit() { 
this.getUsersList(); 
alert('here');   
} 
getUsersList() { 
    return this.userService.getUsersList() 
       .subscribe(
        users => this.users = users, 
        error => this.errorMessage = <any>error); 
    } 
}

个app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { UserListComponent } from './user-list.component'; 
import { UserService } from './user.service'; 
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here 

@NgModule({ 
declarations: [ 
    AppComponent, 
    UserListComponent 
], 
imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule 
], 
providers: [UserService], 
bootstrap: [AppComponent] 
}) 
export class AppModule { }

user.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import {User} from './user'; 
import { Headers, RequestOptions } from '@angular/http'; 
@Injectable() 
export class UserService 
{ 
     constructor (private http:Http){} 
     private api_url = "http://localhost:3000/api/"; 
     getUsersList() : Observable<User[]> 
     { 
      let headers = new Headers(); 
      headers.append('Access-Control-Allow-Origin', '*'); 
      headers.append('Access-Control-Allow-Credentials', 'true'); 
      headers.append('Access-Control-Allow-Methods', 'GET'); 
      headers.append('Access-Control-Allow-Headers', 'Content-Type'); 
      let options = new RequestOptions({headers: headers}); 
      return this.http.get(this.api_url+'getUsersList',options) 
       .map(this.extractData) 
       .catch(this.handleError); 

     } 

     private extractData(res: Response) { 
      let body = res.json(); 
      return body.data || {}; 
     } 
     private handleError(error: Response | any) { 
      // In a real world app, you might use a remote logging infrastructure 
      let errMsg: string; 
      if (error instanceof Response) { 
       const body = error.json() || ''; 
       const err = body.error || JSON.stringify(body); 
       errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
      } else { 
       errMsg = error.message ? error.message : error.toString(); 
      } 
      console.error(errMsg); 
      return Observable.throw(errMsg); 
     } 
}

我不知道究竟是用上面的代码中发生的事情，正在显示萤火控制台上没有错误或浏览器控制台任何帮助将感激

来源

2017-09-05 Swapnil Deo

控制台中的任何错误？ – hagner

控制台没有显示任何错误 –

你怎么知道ngOnInit方法没有被调用？你是否在app.component.html中添加了你的user -ist.component？ – porgo

加入此更改app.component.html代码：

<user-list></user-list>

的OnInit不叫，因为你不使用用户list.component。

来源

2017-09-05 08:44:56 porgo

检查您确实使用组件... 例如是标记<user-list></user-list>定义在您的HTML的某处？

来源

2017-09-05 08:05:50 Jonathan

ngOninit not getting called angular 2 express

回答

相关问题