javascript - 整个应用程序在 prop undefined 错误后停止(需要帮助调试)

Question

错误重现:

1. 我们为其执行一些营销事件的广告商(我们的客户)列表。

2.当您点击某个广告商的“广告事件”按钮时。

结果:您被重定向到“广告事件”页面，并且有所有 所选广告商的广告事件。

3. 但是，在点击“广告事件”按钮将您重定向到广告事件后，有时并非总是，会收到错误属性“name”是不明确的。截屏:

这是点击“Campaign”按钮后执行的主要逻辑。
header.component.ts:

    @Input() advertiserId: string;
    @Input() advertiserIoId: string;
    @Input() campaignId: string;

    public advertiserDto: AdvertiserDto;

    // This prop have value which is undefined in the moment of rendering: "AdvertiserIoDto"
    public advertiserIoDto: AdvertiserIoDto;
    public campaignDto: CampaignDto;

    constructor(private advertiserModel: AdvertiserModel,
                private advertiserIoModel: AdvertiserIoModel,
                private campaignModel: CampaignModel) {
    }

     ngOnChanges() {
        this.getAdvertiserDto();
        this.getAdvertiserDtoData();
        this.getAdvertiserIoDto();

        // here is the problem getAdvertiserIoDtoData()
        this.getAdvertiserIoDtoData();
        this.getCampaignDto();
        this.getCampaignDtoData();
    }

    private getAdvertiserDto(): void {
        this.advertiserDto = this.advertiserModel.getDto(this.advertiserId);
    }

    private getAdvertiserIoDto(): void {
        this.advertiserIoDto = this.advertiserIoModel.getDto(this.advertiserIoId, this.advertiserId);
    }

    private getCampaignDto(): void {
        this.campaignDto = this.campaignModel.getDto(this.campaignId, this.advertiserId, this.advertiserIoId);
    }

    private getAdvertiserDtoData(): void {
        this.advertiserModel
            .getDtoData(this.advertiserDto)
            .catch(error => console.log(error))
    }

    private getAdvertiserIoDtoData(): void {
        this.advertiserIoModel
            .getDtoData(this.advertiserIoDto)
            .catch(error => console.log(error))
    }

    private getCampaignDtoData(): void {
        this.campaignModel
            .getDtoData(this.campaignDto)
            .catch(error => console.log(error))
    }

标题模板 - 部分 ({{advertiserIoDto.dtoData.name }}) - 这里是未精炼的 dtoData.name:

<span *ngIf="campaignDto.isLoaded === true"
      [routerLink]="['/private/advertiser/' + advertiserId + '/advertiserIo/' + advertiserIoId]"
      class="nano-breadcrumb-item">
    {{ advertiserIoDto.dtoData.name }}
</span>

更重要的事情如果您比较“ngOnChanges”和“浏览器”中的执行顺序， 您将看到“getAdvertiserDtoData()”在“getCampaignDtoData()”之前启动，但稍后执行。我认为这是个问题。

截图:

知道如何解决这个问题吗？

错误跟踪:

NanoCampaignHeaderComponent.html:16 ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer] (NanoCampaignHeaderComponent.html:16)
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 execComponentViewsAction (core.es5.js:12531)
at checkAndUpdateView (core.es5.js:12257)
at callViewAction (core.es5.js:12599)

Answer 1

按照我的评论:在 Javascript 中，您可以以返回值的方式编写条件。

例如:

let obj = { a: true, b: true };
console.log(obj.a && obj.b);

你认为什么会流行？可能true:

let obj = { a: true, b: true };
console.log(obj.a && obj.b);

事实上，它不显示 bool 值的结果:它显示条件的最后一个值。这是用字符串很好地描绘出来的:

let obj = { a: 'A', b: 'B' };
console.log(obj.a && obj.b);

现在，您可能会说它应该再次显示 true (因为 truthy and falsy 值)。但请检查一下:

let obj = { a: 'A', b: 'B' };
console.log(obj.a && obj.b);

显示

B。如前所述，返回条件的最后一个值。

我为什么要向你解释这一点？只是因为当你写这个时

advertiserIoDto?.dtoData?.name

这实际上是一个快捷方式

advertiserIoDto && advertiserIoDto.dtoData && advertiserIoDto.dtoData.name

这意味着，如果您理解的话，advertiserIoDto.dtoData.name 将在最后返回。

然后，你有一个 OR 语句:

{{ advertiserIoDto?.dtoData?.name || '' }}

这又与此行为相关:当所有值均为假时，将返回 OR 语句。让我给你看一个例子:

let obj = { a: '', b: '' };
console.log(obj.a && obj.b || 'No value');

由于 '' 为假，因此这两个条件均未满足:返回的代码是 OR 语句。

这与 Angular 中的原理完全相同:您只需将 HTML 中的安全导航 ? 作为快捷方式即可。