Angular ngOnInit javascript 加载页面时出错，但页面按预期工作

Question

我在 angular 中有一个页面，在 ngOnInit 函数中我加载了我的数据。数据加载正确并显示在页面上，一切似乎都正常，唯一的问题是在控制台中我收到很多 javascript 错误 无法读取属性 'propertyName' 。我将感谢任何有关如何消除这些错误的帮助。

以下是我如何初始化存储数据的数组：

raceResult: RaceResultDto = new RaceResultDto();
raceResultStatistics: RaceResultStatisticsData[] = [];
raceResultParticipants: RaceResultParticipantsDto[] = [];
topFiveData: RaceResultTopFiveData[] = [];
raceResultDatas: RaceResultDataDto[] = [];

这是我设置数据和 ngOnInit 函数的方式：

ngOnInit(): void {
    this._activatedRoute.params.subscribe((params: Params) => {
        this.raceResultsId = params['id'];
        this.getRaceResult();
        // this.getRaceResultData();

    });
}

getRaceResult() {
    this.showMainSpinner();
    this._raceResultsServiceProxy.getRaceResultDto(this.raceResultsId).subscribe(result => {
        this.dataLoaded = true;

        this.raceResult = result;

        this.raceResultStatistics = result.raceResultStatistics;
        this.raceResultParticipants = result.raceResultParticipants;
        this.topFiveData = result.topFiveData;
        this.raceResultDatas = result.raceResultDatas;

        console.log(result)
        this.hideMainSpinner();
    });
}

这是我得到的错误。我遇到了很多相同的错误：

ERROR TypeError: Cannot read property 'numberOfPigeons' of undefined
at ViewRaceResultsComponent_Template (view-raceResult.component.html:173)
at executeTemplate (core.js:7303)
at refreshView (core.js:7172)
at refreshComponent (core.js:8326)
at refreshChildComponents (core.js:6965)
at refreshView (core.js:7222)
at refreshEmbeddedViews (core.js:8280)
at refreshView (core.js:7196)
at refreshComponent (core.js:8326)
at refreshChildComponents (core.js:6965)

这也是我使用数据的 table 示例：

<table class="table">
                    <thead>
                        <tr>
                            <td>{{l("FancierFullName")}}</td>
                            <td class="text-right">{{l("NumberOfPigeons")}}</td>
                            <td class="text-right">{{l("AverageSpeed")}} [m/min]</td>
                        </tr>
                    </thead>
                    <tr *ngFor="let topFiveStat of topFiveData">
                        <td>{{topFiveStat.fancierFullName}}</td>
                        <td class="text-right">{{topFiveStat.numberOfPigeons}}</td>
                        <td class="text-right">{{topFiveStat.averageSpeedStr}}</td>
                </table>

Answer 1

当您 subscribe 到 ngOnInit() 中的任何对象时，这是一个常见错误。您收到 undefined 的原因是 subscribe 是 async 函数，并且 HTML component 在您收到 result.

之前加载

其中一个解决方案是根据所需对象是否为 undefined 添加 ngIf 到 HTML component。

此外，如果您分享您的 HTML 片段，将会很有帮助。

Answer 2

如果 topFiveData 列表中没有任何具有 null 或 undefined 的项目，*ngFor 块内不应该存在空指针问题。在 topFiveData 列表中对此进行验证。
如果正确，那么我可以看到您正在调用模板中的一种方法来获取 {{l("NumberOfPigeons")}} 中的鸽子数量。这可能在加载数据之前执行，因此可能有一些代码导致空指针异常。

问题可以通过以下方式解决：

在可能出现空指针的块中使用 *ngIf。
在可能出现空指针的情况下使用安全导航运算符 (?) 操作。 例如topFiveStat?.numberOfPigeons 。但这只适用于模板内部。 https://angular.io/guide/template-expression-operators
您可以在 .ts 文件中添加 null 检查。

希望对您有所帮助。如果不行，请分享您的模板和组件的更多详细信息。

Angular ngOnInit javascript 加载页面时出错，但页面按预期工作

Angular ngOnInit javascript errrors when i load page, but the page works as intended

html

javascript

asp.net

console

angular