Файл не закрывается по событию Target

Я впервые работаю над угловым проектом, который собирает данные о продуктах. Хотя все работает отлично, я получаю сообщение об ошибке в html-файле загрузки изображения. я получаю эту ошибку Свойство «файлы» не существует для типа «EventTarget».

Это html-файл

    <div class = "row mb-3">
        <label for = "Product Image" class = "col-sm-2 col-form-label">Product Image:</label>
        <div class = "form-group">
            <input type = "file" id = "photo" name = "photo" (change) = "handleFileInput($event.target.files)">
        </div>
    </div>

А это мой .ts файл

export class AddProductComponent implements OnInit {
  model:any = {}
  fileToUpload: File = null;
  handleFileInput(files:FileList){
  this.fileToUpload=files.item(0);
  console.info(this.fileToUpload);
  const formData: FormData = new FormData();
  formData.append('Image', this.fileToUpload);
  this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
  console.info(res);
  });
}

Кто-нибудь может мне помочь...

angular typescript event-handling

16.10.2022 16:33

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

134

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

не передавайте files в качестве аргумента, вместо этого передайте весь $event:

<div class = "row mb-3">
    <label for = "Product Image" class = "col-sm-2 col-form-label">Product Image:</label>
    <div class = "form-group">
        <input type = "file" id = "photo" name = "photo" (change) = "handleFileInput($event)">
    </div>
</div>

handleFileInput(event){
     this.fileToUpload=event.target.files[0];
     console.info(this.fileToUpload);
     const formData: FormData = new FormData();
     formData.append('Image', this.fileToUpload);
    
 this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
     console.info(res);
  });

Это сработало, Вэнь, большое спасибо за помощь.

— 17.10.2022 18:09

16.10.2022 22:15