Angular 4数据在Subscribe之外未定义

时间:2017-11-22 18:29:30

标签: angular subscribe

我知道这个问题存在一些主题,但我尝试了很多,似乎没有任何工作......

我有这个方法:

listAllUsersOfProgram() {
        this.programDetailsService.findAllUsersById(this.programId).subscribe(
          res => {
              this.users = res
              this.userSearch = res
              console.log(this.users)
          },
          err => console.log(`aconteceu algum erro: ${err}`)
      )
    }

console.log(this.users)工作得很好.. 但是,当我尝试使用表中的this.users数据时,使用

<tr ngFor="let user of userSearch |
                                paginate:{itemsPerPage:20, currentPage:p}">
                                <td>{{ user.name }}</td>

                            </tr>

它告诉我这是Undefined

listAllUsersOfProgram()

上调用方法ngOnInit method(onInit interface)

如何解决这个问题?

编辑: 完整的错误消息

ProgramDetailsComponent.html:93 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (ProgramDetailsComponent.html:93)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13105)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)
    at checkAndUpdateView (core.es5.js:12252)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)
    at checkAndUpdateView (core.es5.js:12252)
    at callViewAction (core.es5.js:12599)
View_ProgramDetailsComponent_4  @   ProgramDetailsComponent.html:93
DebugContext_.logError  @   core.es5.js:13407
ErrorHandler.handleError    @   core.es5.js:1080
(anonymous) @   core.es5.js:4819
ZoneDelegate.invoke @   zone.js:392
Zone.run    @   zone.js:142
NgZone.runOutsideAngular    @   core.es5.js:3844
ApplicationRef_.tick    @   core.es5.js:4819
(anonymous) @   core.es5.js:4684
ZoneDelegate.invoke @   zone.js:392
onInvoke    @   core.es5.js:3890
ZoneDelegate.invoke @   zone.js:391
Zone.run    @   zone.js:142
NgZone.run  @   core.es5.js:3821
next    @   core.es5.js:4684
schedulerFn @   core.es5.js:3635
SafeSubscriber.__tryOrUnsub @   Subscriber.js:239
SafeSubscriber.next @   Subscriber.js:186
Subscriber._next    @   Subscriber.js:127
Subscriber.next @   Subscriber.js:91
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.es5.js:3621
checkStable @   core.es5.js:3855
onLeave @   core.es5.js:3934
onInvokeTask    @   core.es5.js:3884
ZoneDelegate.invokeTask @   zone.js:424
Zone.runTask    @   zone.js:192
ZoneTask.invokeTask @   zone.js:499
invokeTask  @   zone.js:1540
globalZoneAwareCallback @   zone.js:1566
ProgramDetailsComponent.html:93 ERROR CONTEXT 
DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}}
View_ProgramDetailsComponent_4  @   ProgramDetailsComponent.html:93
DebugContext_.logError  @   core.es5.js:13407
ErrorHandler.handleError    @   core.es5.js:1085
(anonymous) @   core.es5.js:4819
ZoneDelegate.invoke @   zone.js:392
Zone.run    @   zone.js:142
NgZone.runOutsideAngular    @   core.es5.js:3844
ApplicationRef_.tick    @   core.es5.js:4819
(anonymous) @   core.es5.js:4684
ZoneDelegate.invoke @   zone.js:392
onInvoke    @   core.es5.js:3890
ZoneDelegate.invoke @   zone.js:391
Zone.run    @   zone.js:142
NgZone.run  @   core.es5.js:3821
next    @   core.es5.js:4684
schedulerFn @   core.es5.js:3635
SafeSubscriber.__tryOrUnsub @   Subscriber.js:239
SafeSubscriber.next @   Subscriber.js:186
Subscriber._next    @   Subscriber.js:127
Subscriber.next @   Subscriber.js:91
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.es5.js:3621
checkStable @   core.es5.js:3855
onLeave @   core.es5.js:3934
onInvokeTask    @   core.es5.js:3884
ZoneDelegate.invokeTask @   zone.js:424
Zone.runTask    @   zone.js:192
ZoneTask.invokeTask @   zone.js:499
invokeTask  @   zone.js:1540
globalZoneAwareCallback @   zone.js:1566

已解决..错过了* ..

中的ngFor

2 个答案:

答案 0 :(得分:0)

我认为您错过了async管道,或者可能在父*ngIf="userSearch"中添加了<div>

答案 1 :(得分:0)

问题是在设置之前,userSearch是未定义的。视图初始化后会发生这种情况。您可以选择使用ngIf来保护它,或者将其用于空列表。

userSearch = [];

<ng-container *ngIf="userSearch">...content...</ng-container>

或异步管道,但这会对您的代码产生其他影响。