无需使用ngFor，如何将data数组指定元素传入onUpload()？

如果只需要针对data数组中的某个特定元素生成上传组件并将其传入onUpload()，无需通过*ngFor遍历整个数组，直接通过数组索引定位目标元素即可，以下是两种常见实现方式：

1. 固定选取特定索引的元素 #

如果目标元素的索引是固定的（比如选取第1个元素，索引为0），直接在模板中通过data[索引值]获取元素，同时传入对应索引：

<div class="uploadImage">
    <label>Upload Images here</label>
    <input type="file" (change)="onUpload($event, data[0], 0)" accept=".png, .jpg, .jpeg, .webp">
</div>

2. 动态指定目标元素 #

如果需要根据业务逻辑动态切换目标元素，可以在组件类中定义一个变量存储目标索引，模板中通过该变量获取对应元素：

组件类代码 #

// 定义变量存储目标元素的索引，可根据业务逻辑动态修改
targetIndex = 1;

模板代码 #

<div class="uploadImage">
    <label>Upload Images here</label>
    <input type="file" (change)="onUpload($event, data[targetIndex], targetIndex)" accept=".png, .jpg, .jpeg, .webp">
</div>

说明 #

原来的*ngFor是遍历整个data数组生成对应数量的上传组件，现在通过直接引用数组特定索引的方式，就能精准绑定目标元素，同时保留原有的onUpload()参数传递逻辑。

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