Angular - 子组件 - @Input 变量 - 更新

Question

我有以下子组件：

record-details.component.ts：

@Component
({
  selector: 'app-record-details',
  templateUrl: './record-details.component.html',
  styleUrls: ['./record-details.component.scss']
})

export class RecordDetailsComponent
{
  @Input() recordDetails: any;
}

record-details.component.html：

<div id="container">
    <div *ngIf="recordDetails">
      <ol-map [recordDetails]="recordDetails" zoom="18" width="100%" height="65vh">
        <ol-map-marker [recordDetails]="recordDetails"></ol-map-marker>
      </ol-map>

      <div *ngIf="recordDetails.hours">
        <hr>
        <p>Hours:</p>
        <div *ngFor="let item of recordDetails.hours | keyvalue">
          {{item.key}}: {{item.value}}
        </div>
      </div>
</div>

第二个 *ngIf 显示如下内容：

Hours:

Friday: 11:0-20:0
Monday: 10:0-18:0
Saturday: 11:0-20:0
Sunday: 13:0-18:0
Thursday: 11:0-20:0
Tuesday: 11:0-20:0
Wednesday: 10:0-18:0 

hours 属性并不总是被定义。当它是时，它看起来像这样：

我需要对 recordDetails.hours 进行以下调整：

• 工作日应该正确排序
• 分钟数应始终为 2 位数（11:0-20:0 应为 11:00-20:00）

我想这需要在 .ts 文件中完成。由于某种原因，我无法访问 hours 属性。

我该怎么做？

谢谢。