angular - 从接口获取值以“无法读取未定义的属性（读取'时间戳'）”结尾

Question

我正在通过 API 从我们的系统中提取信息，并希望输出特定的日期和信息。请求和交付工作正常：

{
    "id": "13963",
    "timestamp": "1631787752",
    "type": "cron",
    "rows": "0",
    "duration": "0"
}

我的界面如下所示：

export interface StatusInterface {
    [key: string]: StatusElementInterface;
}

export interface StatusElementInterface {
    type?: string;
    lastrun?: Date;
    timestamp?: number;
}

我同样从我们班级的 API 请求信息：

dataArray = [
    "import",
    //"export",
    "cron",
    "delta"
];

dataResults = {} as StatusInterface;

在构造函数中，我以这种方式生成数组：

for (var val in this.dataArray) {
    this.dataResults[val] = {} as StatusElementInterface;
}

在 ngAfterViewInit 我以这种方式运行一个循环：

    for(var val of this.dataArray) {

        const requestUrl = `${href}?type=${val}`;

        this._httpClient.get<StatusInterface>(requestUrl)
          .pipe(
            map(data => {
              return data
            })
          )
          .subscribe(data => {

            // @ts-ignore
            this.dataResults[val] = data;
            console.log(this.dataResults[val]);
          }

控制台输出是正确的，当我尝试在 HTML 文件中显示它时，dataResults["delta"]我得到一个[Object object]，当我尝试这样做时，我得到一个属性dataResults["delta"]["timestamp"]的错误。undefined

有人可以调整我，什么是假的或我的错误在哪里？

Javascript日志是

ERROR TypeError: Cannot read properties of undefined (reading 'timestamp')
    at StatusViewComponent_Template (status-view.component.html:18)
    at executeTemplate (core.js:9599)
    at refreshView (core.js:9465)
    at refreshComponent (core.js:10636)
    at refreshChildComponents (core.js:9261)
    at refreshView (core.js:9515)
    at refreshEmbeddedViews (core.js:10590)
    at refreshView (core.js:9489)
    at refreshComponent (core.js:10636)
    at refreshChildComponents (core.js:9261)

我在 html 中的模板现在看起来如此：

        <mat-list-item>
            <mat-icon mat-list-icon>done</mat-icon>
            <div mat-line>Cronjob</div>
            <div mat-line *ngIf="cronTimestamp">Zuletzt beendet: {{ cronTimestamp | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
        </mat-list-item>
        <mat-list-item>
            <mat-icon mat-list-icon>done</mat-icon>
            <div mat-line>Exportprozess</div>
            <div mat-line *ngIf="exportTimestamp">Zuletzt beendet: {{ exportTimestamp | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
        </mat-list-item>
        <mat-list-item>
            <mat-icon mat-list-icon>done</mat-icon>
            <div mat-line>Deltaexport</div>
            <div mat-line *ngIf="deltaTimestamp; else loading">Zuletzt beendet: {{ deltaTimestamp | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
        </mat-list-item>
        <mat-list-item>
            <mat-icon mat-list-icon>error</mat-icon>
            <div mat-line>Importprozess</div>
            <div mat-line *ngIf="importTimestamp">Zuletzt beendet: {{ importTimestamp | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
        </mat-list-item>

我这样定义吸气剂：

get deltaTimestamp():number|undefined{
    if (this.dataResults['delta'] && this.dataResults['delta']['timestamp'] !== undefined)
        return (this.dataResults['delta']['timestamp'] * 1000);
    return (undefined);
}

get importTimestamp():number|undefined{
    if (this.dataResults['import'] && this.dataResults['import']['timestamp'] !== undefined)
        return (this.dataResults['import']['timestamp'] * 1000);
    return (undefined);
}

get exportTimestamp():number|undefined{
    if (this.dataResults['export'] && this.dataResults['export']['timestamp'] !== undefined)
        return (this.dataResults['export']['timestamp'] * 1000);
    return (undefined);
}

get cronTimestamp():number|undefined{
    if (this.dataResults['cron'] && this.dataResults['cron']['timestamp'] !== undefined)
        return (this.dataResults['cron']['timestamp'] * 1000);
    return (undefined);
}

仅显示 deltaTimestamp。

亲切的问候亨宁

标签： angulartypescript

Answer 1

只需删除// @ts-ignore它会忽略您的分配。

现在，如果在您的 html 视图中遇到问题，您可以编写dataResults?.delta?.timestamp，因为您必须等到对象被填充

如果你在视图端进行计算，你仍然会遇到问题，你可以做的就是制作一个像这样的吸气剂：

get deltaTimestamp():number|undefined{
  if (this.dataResults['delta'] && this.dataResults['delta']['timestamp'] !== undefined)
    return (this.dataResults['delta']['timestamp'] * 1000);
  return (undefined);
}

然后只需deltaTimestamp在您的视图中写入即可访问该值。

可以使用的更通用的方法是ngFor*使用诸如getTimestamp(key)where you can access之类的函数delta，cron等等时间戳值。