Angular2 - 当我尝试在页面上呈现值时出错

Question

我在component.html页面中有这个简单的代码，但不起作用：

html组件代码

<p class="form-control-static"><b>{{_idOffert}} - {{offert.idOffert}}</b></p>

component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Offert } from "../model/offert";
import { Router,  ActivatedRoute } from "@angular/router";
import { OffertService } from "../services/offert.service";
import { AuthService } from "../services/auth.service";

@Component({
  selector: 'app-offert-detail',
  templateUrl: './offert-detail.component.html',
  styleUrls: ['./offert-detail.component.css']
})
export class OffertDetailComponent implements OnInit {

  @Input() _idOffert: number;

  offert:Offert;
  test:string;
  errorMessage: string;

  constructor(
    private offertService: OffertService,
    private router: Router,
    private route: ActivatedRoute,
    private authService: AuthService) { 

      if (!this.authService.isLoggedIn()) {
        this.router.navigate([""]);
      }

    }

  ngOnInit() {

    this.route.params.subscribe(params =>{
      this._idOffert = params['idOffert'];
    });

    var s = null;

    s = this.offertService.GetOffertDetail(0, this._idOffert);    

    s.subscribe(
      res => {
        this.test = res.header['title'];
        this.offert = res.header;                        
      },
      error => this.errorMessage = <any>error
    );

  }

}

_idOffert 变量显示正确但 offert.idOffert no。

如果我查看控制台日志，我会发现：

错误

19:47:36.003 ERROR Error: Uncaught (in promise): TypeError: co.offert is undefined
View_OffertDetailComponent_0/<@ng:///AppModule/OffertDetailComponent.ngfactory.js:1707:9
debugUpdateRenderer@http://localhost:4200/vendor.bundle.js:13428:12
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12807:5
callViewAction@http://localhost:4200/vendor.bundle.js:13117:17
execComponentViewsAction@http://localhost:4200/vendor.bundle.js:13063:13
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12808:5
callWithDebugContext@http://localhost:4200/vendor.bundle.js:13790:39
debugCheckAndUpdateView@http://localhost:4200/vendor.bundle.js:13330:12
ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.bundle.js:10899:54
RouterOutlet.prototype.activateWith@http://localhost:4200/vendor.bundle.js:21311:9
ActivateRoutes.prototype.placeComponentIntoOutlet@http://localhost:4200/vendor.bundle.js:20491:9
ActivateRoutes.prototype.activateRoutes@http://localhost:4200/vendor.bundle.js:20472:21
ActivateRoutes.prototype.act…
Analisi dello stack:
resolvePromise@http://localhost:4200/polyfills.bundle.js:6638:31 [angular]
resolvePromise@http://localhost:4200/polyfills.bundle.js:6609:17 [angular]
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:6686:17 [angular]
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/vendor.bundle.js:4893:28 [angular]
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6323:17 [angular]
Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6091:28 [<root> => angular]
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6519:25 [<root>]
ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:6390:25 [<root>]
 1 vendor.bundle.js:1861:5
    defaultErrorLogger http://localhost:4200/vendor.bundle.js:1861:5
    ErrorHandler.prototype.handleError http://localhost:4200/vendor.bundle.js:1921:9
    PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</<.next http://localhost:4200/vendor.bundle.js:5531:69
    EventEmitter.prototype.subscribe/schedulerFn< http://localhost:4200/vendor.bundle.js:4605:36
    SafeSubscriber.prototype.__tryOrUnsub http://localhost:4200/vendor.bundle.js:390:13
    SafeSubscriber.prototype.next http://localhost:4200/vendor.bundle.js:339:17
    Subscriber.prototype._next http://localhost:4200/vendor.bundle.js:279:9
    Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:243:13
    Subject.prototype.next http://localhost:4200/vendor.bundle.js:15226:17
    EventEmitter.prototype.emit http://localhost:4200/vendor.bundle.js:4591:54
    NgZone.prototype.triggerError http://localhost:4200/vendor.bundle.js:4962:56
    NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onHandleError http://localhost:4200/vendor.bundle.js:4923:17
    ZoneDelegate.prototype.handleError http://localhost:4200/polyfills.bundle.js:6295:17
    Zone.prototype.runGuarded http://localhost:4200/polyfills.bundle.js:6067:25
    drainMicroTaskQueue/_loop_1 http://localhost:4200/polyfills.bundle.js:6530:25
    drainMicroTaskQueue http://localhost:4200/polyfills.bundle.js:6539:21
    ZoneTask/this.invoke http://localhost:4200/polyfills.bundle.js:6390:25

我不知道为什么它不起作用......

如果我尝试仅渲染 {{offert}} ，则显示“[object Object]”...

感谢支持

Answer 1

调用ngOnInit之前的页面呈现。

因此它会尝试获取引发错误的offert.idOffert。

您可以通过以下几种方式解决此问题，但我建议您将html更改为：

<div *ngIf="offert">
  <p class="form-control-static"><b>{{_idOffert}} - {{offert.idOffert}}</b></p>
</div>