Angular父组件向子组件传递*ngFor中item对象的实现方案

在Angular中，父组件向子组件传递数据的标准且最优方式是使用**@Input()装饰器**。针对你的场景，只需三步即可解决：

1. 父组件HTML：通过属性绑定传递item #

在<app-timeline-time-off-approved>标签上添加属性绑定，把循环中的item传递给子组件：

<table class="table table-striped">
  <tr *ngFor="let item of filteredItems$ | async; index as i">
    <td>
      <!-- 使用属性绑定传递item，命名为timeOffItem更具语义 -->
      <app-timeline-time-off-approved [timeOffItem]="item"></app-timeline-time-off-approved>
    </td>
</table>

2. 子组件TS：定义@Input()接收数据 #

导入Input装饰器，定义接收父组件数据的属性并指定类型（保证类型安全）：

import { Component, OnInit, Input } from '@angular/core';
// 确保导入对应的模型类型，路径需匹配项目结构
import { TimeOffApprovedModel } from '../path-to-your-model';

@Component({
  selector: 'app-timeline-time-off-approved',
  templateUrl: './timeline-time-off-approved.component.html',
  styleUrls: ['./timeline-time-off-approved.component.css'],
})
export class TimelineTimeOffApprovedComponent implements OnInit {
  // 定义输入属性，接收父组件传递的item
  @Input() timeOffItem!: TimeOffApprovedModel;

  constructor() {}
  ngOnInit(): void {}
}

注：!表示该属性在组件初始化时会被赋值，避免类型检查报错；若需处理可选场景，可改为@Input() timeOffItem?: TimeOffApprovedModel。

3. 子组件HTML：使用接收的属性 #

把模板中所有item替换为子组件中定义的timeOffItem：

<ul class="timeline" id="timeline">
    <li class="li complete">
      <div class="timestamp">
        <span>Expire: {{timeOffItem.awardedExpirationDate}}</span>
        <span>Hours: {{timeOffItem.awardedHours}}</span>
      </div>
      <div class="point"><h5>Awarded Time</h5></div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Expire: {{timeOffItem.advanceExpirationDate}}</span>
        <span>Hours: {{timeOffItem.advanceHours}} </span>
      </div>
      <div class="point"><h5>Advance Time</h5></div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Available Time: {{timeOffItem.availableHours >=0 ? timeOffItem.availableHours: 0}}</span>
        <span>&nbsp;</span>
      </div>
      <div class="point"><h5>Total</h5></div>
    </li>
</ul>  

额外注意事项 #

• 确保TimeOffApprovedModel在子组件中正确导入，路径需匹配项目结构；
• 输入属性名建议使用语义化命名（如timeOffItem），避免和组件内部变量冲突；
• 若需监听输入属性的变化，可使用ngOnChanges生命周期钩子或属性setter，示例：

  @Input() set timeOffItem(value: TimeOffApprovedModel) {
    // 处理值变化逻辑
    this._timeOffItem = value;
  }
  private _timeOffItem!: TimeOffApprovedModel;
  

内容的提问来源于stack exchange，提问作者Jesus