避免“无法读取未定义的属性”错误

Question

我通过安装了frxjs-Ngx-Timeline（这是演示）

npm i @frxjs/ngx-timeline  

它安装了最新版本，即

"@frxjs/ngx-timeline": "^19.0.0"

。 这是我的 HTML 代码：

<div class="row row-space">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            Key Dates
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <ngx-timeline [events]="events"></ngx-timeline>
        </mat-card-content>
      </mat-card>
    </div>  

这是我的打字稿代码：（我尝试使用示例 json 数据）

events = [
    { date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
    { date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
    { date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
    { date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
    { date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
  ]

当我运行该代码时，我收到此错误：

错误类型错误：无法读取未定义的属性（读取“getTime”） 在 frxjs-ngx-timeline.mjs:880:33

所以我尝试使用以下代码微调 JSON：

events = [
    { date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
    { date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
    { date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
    { date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
    { date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
  ].map(event => ({
    ...event,
    date: this.isValidDate(event.date) ? event.date : 'Invalid date'
  }));

  isValidDate(date: any): boolean {
    return !isNaN(new Date(date).getTime());
  }  

但这并没有修复错误。我该如何修复该错误？
编辑：
我尝试使用界面：

interface NgxTimelineEvent {
  date: string;
  title: string;
  description?: string;
  highlight?: boolean;
}
events: NgxTimelineEvent[] = [
    { date: '2023-01-01', title: 'Label 1', description: 'File 1', highlight: false },
    { date: '2023-06-01', title: 'Label 2', description: 'File 2', highlight: true }
  ]  

但这并没有修复错误。

Answer 1

您应该提供一个

date

对象而不是字符串。这就是您收到错误的原因。

错误类型错误：无法读取 frxjs-ngx-timeline.mjs:880:33 处未定义的属性（读取“getTime”）

尝试传入日期而不是字符串，我使用

new Date(...)

将字符串转换为日期，请执行相同操作。

events = [
    { date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
    { date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
    { date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
    { date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
    { date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
  ].map(event => ({
    ...event,
    date: this.isValidDate(event.date) ? new Date(event.date) : 'Invalid date'
  }));

或

events = [
    { date: new Date('2023-01-01'), title: 'Event 1', description: 'Description for event 1.' },
    { date: new Date('2023-06-01'), title: 'Event 2', description: 'Description for event 2.' },
    { date: new Date('2023-06-01'), title: 'Event 3', description: 'Description for event 3.' },
    { date: new Date('2023-06-01'), title: 'Event 4', description: 'Description for event 4.' },
    { date: new Date('2023-06-01'), title: 'Event 5', description: 'Description for event 5.' },
  ]