Angular 2 - 数据未在Service中显示在HTML中

时间：2017-12-14 08:43:21

标签： angular rest spring-boot service

我是Angular的新手，并使用Spring Boot和REST Web服务创建了一个CRUD应用程序。现在我有一个组件以表格形式显示数据库中的数据。我已经创建了一个服务来处理来自Spring Boot Web服务的JSON数据，并且我能够 console.log 来自组件的内容，但它们不会反映在HTML中。不知道我在哪里做错了。非常感谢任何帮助，过去一天都在敲打我的脑袋。控制台和代码段的堆栈跟踪在

下面

浏览器控制台 

    GET 
http://localhost:4200/ [HTTP/1.1 304 Not Modified 21ms]
GET 
http://localhost:4200/assets/css/Roboto.css [HTTP/1.1 304 Not Modified 1ms]
GET 
http://localhost:4200/assets/css/MaterialIcons.css [HTTP/1.1 304 Not Modified 0ms]
GET 
http://localhost:4200/assets/css/material.css [HTTP/1.1 304 Not Modified 1ms]
GET 
http://localhost:4200/assets/js/jquery-3.2.1.slim.min.js [HTTP/1.1 304 Not Modified 1ms]
GET 
http://localhost:4200/assets/js/popper.min.js [HTTP/1.1 304 Not Modified 0ms]
GET 
http://localhost:4200/assets/js/bootstrap.min.js [HTTP/1.1 304 Not Modified 0ms]
GET 
http://localhost:4200/assets/js/material.js [HTTP/1.1 304 Not Modified 0ms]
GET 
http://localhost:4200/inline.bundle.js [HTTP/1.1 304 Not Modified 0ms]
GET 
http://localhost:4200/polyfills.bundle.js [HTTP/1.1 304 Not Modified 1ms]
GET 
http://localhost:4200/styles.bundle.js [HTTP/1.1 304 Not Modified 1ms]
GET 
http://localhost:4200/vendor.bundle.js [HTTP/1.1 304 Not Modified 18ms]
GET 
http://localhost:4200/main.bundle.js [HTTP/1.1 200 OK 1ms]
ERROR TypeError: _co.user is undefined
Stack trace:
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:315:9
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14886:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14384:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14316:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14039:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15287:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14824:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11801:9
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6109:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6109:13
ApplicationRef.prototype._loadComponent@webpack-internal:///../../../core/esm5/core.js:6175:9
ApplicationRef.prototype.bootstrap@webpack-internal:///../../../core/esm5/core.js:6063:9
PlatformRef.prototype._moduleDoBootstrap/<@webpack-internal:///../../../core/esm5/core.js:5783:74
PlatformRef.prototype._moduleDoBootstrap@webpack-internal:///../../../core/esm5/core.js:5783:13
PlatformRef.prototype.bootstrapModuleFactory/</</<@webpack-internal:///../../../core/esm5/core.js:5704:21
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:873:52
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4943:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:602:25
AppComponent.ngfactory.js:220:8

ERROR CONTEXT Object { view: Object, nodeIndex: 129, nodeDef: Object, elDef: Object, elView: Object }AppComponent.ngfactory.js:220:8

Angular is running in the development mode. Call enableProdMode() to enable the production mode.core.js:3859:9
ERROR TypeError: _co.user is undefined
Stack trace:
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:315:9
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14886:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14384:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14316:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14039:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15287:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14824:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11801:9
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6109:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6109:13
ApplicationRef/<.next/<@webpack-internal:///../../../core/esm5/core.js:5942:99
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24
NgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4769:54
ApplicationRef/<.next@webpack-internal:///../../../core/esm5/core.js:5942:69
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4538:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:244:13
SafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:191:17
Subscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:132:9
Subscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96:13
Subject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4518:24
checkStable@webpack-internal:///../../../core/esm5/core.js:4917:13
forkInnerZoneWithAngularBehavior/zone._inner<.onHasTask@webpack-internal:///../../../core/esm5/core.js:4965:21
ZoneDelegate.prototype.hasTask@webpack-internal:///../../../../zone.js/dist/zone.js:445:21
ZoneDelegate.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:465:17
Zone.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:289:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:209:25
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:602:25
AppComponent.ngfactory.js:220:8

ERROR CONTEXT Object { view: Object, nodeIndex: 129, nodeDef: Object, elDef: Object, elView: Object }AppComponent.ngfactory.js:220:8

GET 
http://localhost:4200/assets/imgs/avatar.jpg [HTTP/1.1 304 Not Modified 1ms]
OPTIONS 
XHR 
http://localhost:8080/api/users [HTTP/1.1 200  1113ms]
GET 
XHR 
http://localhost:4200/sockjs-node/info [HTTP/1.1 200 OK 1483ms]
GET 
XHR 
http://localhost:8080/api/users [HTTP/1.1 200  4068ms]
GET 
http://localhost:4200/sockjs-node/896/bjb5gb5f/websocket [HTTP/1.1 101 Switching Protocols 62ms]
GET 
http://localhost:4200/assets/css/material.css [HTTP/1.1 200 OK 0ms]
ERROR TypeError: _co.user is undefined
Stack trace:
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:315:9
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14886:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14384:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14316:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14039:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15287:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14824:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11801:9
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6109:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6109:13
ApplicationRef/<.next/<@webpack-internal:///../../../core/esm5/core.js:5942:99
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24
NgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4769:54
ApplicationRef/<.next@webpack-internal:///../../../core/esm5/core.js:5942:69
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4538:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:244:13
SafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:191:17
Subscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:132:9
Subscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96:13
Subject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4518:24
checkStable@webpack-internal:///../../../core/esm5/core.js:4917:13
onLeave@webpack-internal:///../../../core/esm5/core.js:4996:5
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4946:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
ZoneTask/this.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:488:28
scheduleTask/target[XHR_LISTENER]@webpack-internal:///../../../../zone.js/dist/zone.js:2924:25
AppComponent.ngfactory.js:220:8

ERROR CONTEXT Object { view: Object, nodeIndex: 129, nodeDef: Object, elDef: Object, elView: Object }AppComponent.ngfactory.js:220:8

*** --- [{"username":"admin","password":"admin"},{"username":"test","password":"test"},{"username":"user","password":"user"}] --- ***app.component.ts:24:13
ERROR TypeError: _co.user is undefined
Stack trace:
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:315:9
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14886:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14033:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14384:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14316:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14039:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15287:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14824:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11801:9
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6109:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6109:13
ApplicationRef/<.next/<@webpack-internal:///../../../core/esm5/core.js:5942:99
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@webpack-internal:///../../../core/esm5/core.js:4952:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24
NgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4769:54
ApplicationRef/<.next@webpack-internal:///../../../core/esm5/core.js:5942:69
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4538:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:244:13
SafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:191:17
Subscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:132:9
Subscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96:13
Subject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4518:24
checkStable@webpack-internal:///../../../core/esm5/core.js:4917:13
onLeave@webpack-internal:///../../../core/esm5/core.js:4996:5
forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4946:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
patchEventTarget/invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9
patchEventTarget/globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17
AppComponent.ngfactory.js:220:8

ERROR CONTEXT Object { view: Object, nodeIndex: 129, nodeDef: Object, elDef: Object, elView: Object }AppComponent.ngfactory.js:220:8

user.ts 

export class User {
username: string;
password: string;
constructor(){}
}

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserService } from './user.service';


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

user.service.ts 

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

import { User } from './user';

@Injectable()
export class UserService {

  private baseUrl: string='http://localhost:8080/api';
  private headers = new Headers({'Content-Type':'application/json'});
  private options = new RequestOptions({headers:this.headers});
  private user: User;

  constructor(private _http: Http) { }

  getUsers() {
    return this._http.get(this.baseUrl + '/users', this.options)
      .map((response: Response) => response.json())
        .catch(this.errorHandler);
  }

  errorHandler(){
    return Observable.throw(Error || "!!! SERVER ERROR !!!");
  }    
}

app.component.ts 

import { Component, OnInit } from '@angular/core';

import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  public users: User[];

  constructor(private _userService: UserService) {}

  ngOnInit() {
    this._userService.getUsers().subscribe((users)=>{
      this.users=users;
    }, (error)=>{
      console.log(error);
    })
  }    
}

app.component.html 

<table class="table table-bordered table-hover text-center mt-2" *ngIf="users">
    <thead class="blue darken-4">
      <tr>
        <th class="white-text">
          <strong>Username</strong>
        </th>
        <th class="white-text">
          <strong>Password</strong>
        </th>
        <th class="white-text">
          <strong>Actions</strong>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">            
        <td class="pt-4">{{user.username}}</td>
        <td class="pt-4">{{user.password}}</td>
        <td>
          <button type="button" class="btn btn-sm w-25 waves-attach modal-trigger blue accent-3 text-white" (click)="updateUser(user)">
            <span class="material-icons">build</span>
          </button>
          <button type="button" class="btn btn-sm w-25 waves-attach blue accent-3 text-white" (click)="deleteUser(user)">
            <span class="material-icons">delete_forever</span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>

0 个答案:

没有答案
相关问题
最新问题