Angular - 如何使用表單將文本區域輸入綁定到循環中的圖像

Question

我有一個簡單的應用程序，用戶可以在其中上傳一張或多張圖片。 在預覽模式下，用戶必須為每張圖片添加描述，然后他才能上傳帶有圖片的圖片。 然后將它們添加到現有圖片的末尾。

這是代碼的鏈接： https://stackblitz.com/edit/angular-12-multiple-image-upload-preview-arzita?file=src/app/components/upload-images/upload-images.component。網頁格式

但我的問題是，當我上傳時，每張圖片都會顯示文本框輸入的第一次出現。 您知道如何為每張圖片添加自己的描述嗎？

謝謝你。

我嘗試了什么： https ://stackblitz.com/edit/angular-12-multiple-image-upload-preview-arzita?file=src/app/components/upload-images/upload-images.component.html

我在期待什么：我希望每張圖片都有獨特的描述。

Answer 1

發生這種情況是因為您推錯了數組的值。

表格總是由她自己更新。 始終檢查控制台日志。

 this.uploadService.data.push(<Picture>{ imageSrc: this.previews[idx], imageDesc: this.descriptionForm.get('description').value, });