无法读取未定义的属性“元”[重复]

【问题标题】：Cannot read property 'meta' of undefined [duplicate]无法读取未定义的属性“元”[重复]
【发布时间】：2018-11-18 19:43:53
【问题描述】：

当我发出获取请求以获取我已分页的所有锦标赛时，我会收到这种 json。

{
"data": [...],
"links": {...},
"meta": {...}
}

现在我的组件，我得到了所有的锦标赛

getTournaments(): void {
  this.tournamentService.all()
    .subscribe(tournaments => this.tournaments = tournaments);
}

我的服务

all(): Observable<Tournament[]> {
    return this.http.get<Tournament[]>(this.listUrl)
      .pipe(
        tap(tournaments => console.log(`fetched tournaments`)),
        catchError(this.handleError('all', []))
      );
  }

在我看来，我是这样获取它的：

我可以像这样访问 html 中的数据：

{{ tournaenter code herements['meta'].total }}

它在屏幕上显示得很好，但它也在控制台中向我发送了 2 个错误：

TournamentsComponent.html:13 ERROR TypeError: Cannot read property 'meta' of undefined
    at Object.eval [as updateRenderer] (TournamentsComponent.html:13)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
    at checkAndUpdateView (core.js:11312)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)
View_TournamentsComponent_0 @ TournamentsComponent.html:13
proxyClass @ compiler.js:10058
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:12166
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
(anonymous) @ core.js:5093
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5093
(anonymous) @ core.js:4929
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3918
next @ core.js:4929
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
checkStable @ core.js:4031
onHasTask @ core.js:4075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4791
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
TournamentsComponent.html:13 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}}
View_TournamentsComponent_0 @ TournamentsComponent.html:13
proxyClass @ compiler.js:10058
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:12166
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1652
(anonymous) @ core.js:5093
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5093
(anonymous) @ core.js:4929
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3918
next @ core.js:4929
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
checkStable @ core.js:4031
onHasTask @ core.js:4075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4791
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
TournamentsComponent.html:13 ERROR TypeError: Cannot read property 'meta' of undefined
    at Object.eval [as updateRenderer] (TournamentsComponent.html:13)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
    at checkAndUpdateView (core.js:11312)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)
View_TournamentsComponent_0 @ TournamentsComponent.html:13
proxyClass @ compiler.js:10058
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:12166
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
(anonymous) @ core.js:5093
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5093
(anonymous) @ core.js:4929
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3918
next @ core.js:4929
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
checkStable @ core.js:4031
onLeave @ core.js:4098
onInvokeTask @ core.js:4056
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
target.(anonymous function) @ zone.js:2960
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
(anonymous) @ http.js:1932
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:161
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:6
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:127
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:124
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:107
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:176
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:161
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:80
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:55
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:51
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call @ tap.js:60
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:17
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../src/app/components/tournaments/tournaments-index/tournaments.component.ts.TournamentsComponent.all @ tournaments.component.ts:24
push../src/app/components/tournaments/tournaments-index/tournaments.component.ts.TournamentsComponent.ngOnInit @ tournaments.component.ts:36
checkAndUpdateDirectiveInline @ core.js:10097
checkAndUpdateNodeInline @ core.js:11363
checkAndUpdateNode @ core.js:11325
debugCheckAndUpdateNode @ core.js:11962
debugCheckDirectivesFn @ core.js:11922
(anonymous) @ TournamentsComponent_Host.ngfactory.js? [sm]:1
debugUpdateDirectives @ core.js:11914
checkAndUpdateView @ core.js:11307
callViewAction @ core.js:11548
execEmbeddedViewsAction @ core.js:11511
checkAndUpdateView @ core.js:11308
callViewAction @ core.js:11548
execComponentViewsAction @ core.js:11490
checkAndUpdateView @ core.js:11313
callWithDebugContext @ core.js:12204
debugCheckAndUpdateView @ core.js:11882
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:9692
(anonymous) @ core.js:5086
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5086
(anonymous) @ core.js:4929
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3918
next @ core.js:4929
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
checkStable @ core.js:4031
onHasTask @ core.js:4075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4791
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
TournamentsComponent.html:13 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}

谁能解释一下这种行为？

【问题讨论】：

    标签： angular


    【解决方案1】：

    如果您查看错误，它来自component.html，您需要使用安全导航运算符或*ngIf来处理来自您的异步请求的响应延迟，

    另外，由于您想计算 arrya 中元素的数量，请将您的模板更改为，

    {{ tournaments?.meta?.total }}

    【讨论】：

    • 解析器错误：在 [ {{ 锦标赛？['meta']?.total }} ] 中的第 15 列出现意外的标记 [、预期的标识符或关键字]
    • 好的，问题我基本明白了，是因为延迟...
    • @JuliatzindelToro 好:)
    • 但它不适用于数组我应该怎么做？锦标赛？.['meta'] 不起作用
    • {{ 锦标赛?.meta?.total }} 我是这样弄的
    【解决方案2】：

    我看不到您的 html，但听起来您需要在使用之前确保数据存在。使用*ngIf...这里有几个例子

    <div *ngIf="tournaments">
    <div *ngFor="let item of tournaments;">
        <div *ngIf="item?.meta">
            {{item.meta}}
        </div>
    </div>
</div>

    【讨论】：

      猜你喜欢
      • 2017-06-05
      • 2019-03-10
      • 2017-12-02
      • 2016-09-14
      • 2021-03-18
      • 2023-03-23
      • 1970-01-01
      • 1970-01-01
      • 2011-12-21
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode