Angular循环中如何为日期选择器设置唯一引用？

你遇到的问题是因为循环内所有日期选择器都使用了同一个固定模板引用变量，导致所有输入框绑定到同一个实例，引发冲突。解决方法很简单，利用Angular *ngFor 的作用域隔离特性即可：

方法一：利用循环独立作用域（推荐） #

在*ngFor的每个迭代项中，模板引用变量的作用域是独立的，直接在循环内使用同一个引用名即可，无需动态命名：

<tr *ngFor="let row of rows; let i = index">
    <td>{{ row.name }}</td>
    <td>
        <input
            type="text"
            name="date{{i}}"
            [value]="row.planned_date"
            (blur)="updatePlannedDate(row, $event)"
            [owlDateTime]="picker"
            [owlDateTimeTrigger]="picker"
        />
        <owl-date-time
            #picker
            [pickerType]="'calendar'"
        ></owl-date-time>
    </td>
</tr>

每个循环项里的#picker都是当前行独有的变量，不会和其他行的引用冲突，输入框会正确绑定到当前行对应的日期选择器实例。

方法二：动态命名引用（需组件类配合） #

如果需要在组件类中访问特定行的日期选择器实例，可以结合循环索引动态收集引用，再通过ViewChildren获取：

模板代码 #

<tr *ngFor="let row of rows; let i = index">
    <td>{{ row.name }}</td>
    <td>
        <input
            type="text"
            name="date{{i}}"
            [value]="row.planned_date"
            (blur)="updatePlannedDate(row, $event)"
            [owlDateTime]="pickerList.get(i)"
            [owlDateTimeTrigger]="pickerList.get(i)"
        />
        <owl-date-time
            #picker
            [pickerType]="'calendar'"
        ></owl-date-time>
    </td>
</tr>

组件类代码 #

import { Component, ViewChildren, QueryList } from '@angular/core';
import { OwlDateTimeComponent } from 'ng-pick-datetime';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChildren('picker') pickerList!: QueryList<OwlDateTimeComponent>;

  // 示例：获取指定索引的日期选择器
  getPicker(index: number) {
    return this.pickerList.toArray()[index];
  }
}

这种方式通过ViewChildren收集所有循环内的日期选择器实例，再根据索引访问特定实例，适合需要对单个日期选择器做自定义操作的场景。

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