10
votes

Quel type Typecript est un événement de modification? (En angulaire)

J'essaie de comprendre quel type Typecript un événement de modification est utilisé dans un projet angulaire.

Le code est quelque chose de simple comme ceci:

file-upload.component.html

Property 'files' does not exist on type 'EventTarget'

fichier-upload.ts

public onChange(event: Event): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

Taper l'événement comme l' Event me donne l'erreur de peluchage Tapuscrit suivante:

<input type="file" (change)="onChange($event)"/>

Que dois-je taper ceci sinon Event ?

typescript angular

2 commentaires

Vous devez enquêter sur [(ngModel)] pour obtenir la référence de l'entrée

Je pense que vous cherchez à obtenir votre event.target est (event.target as HTMLInputElement).value place et Event est correct étant donné que c'est l' interface correcte pour le change techniquement, mais ne peut pas tester pour le moment donc juste un commentaire.

4 Réponses :

2
votes

les fichiers doivent être accessibles via la propriété event.srcElement.files .

1 commentaires

Cela me donne une erreur de linting TS similaire. La Property 'files' does not exist on type 'Element'.

15
votes

C'est un événement. Mais vous allez devoir convertir le const que vous utilisez en HTMLInputElement.

public onChange(event: Event): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [file] = event.target.files;
  }
}

Le seul autre moyen sera de supprimer l'erreur avec tsignore. Dans react, flow, ils ont un type SyntheticEvent que vous pouvez taper ce cas particulier pour le contourner mais angular n'a pas de véritable équivalent.

2 commentaires

Cela fonctionne pour éliminer cette erreur TS, mais a un problème avec la ligne 3: le Type 'FileList' is not an array type @ qt-ray

Seriez-vous capable d'encapsuler event.target dans la ligne trois en tant que HTMLInputElement et d'utiliser const files = (event.target as HTMLInputElement).files et obtenir le fichier dont vous avez besoin? Je peux vous aider davantage si vous le souhaitez aussi!

1
votes

public onChange(event: ChangeEvent<HTMLInputElement>) {
   const [file] = event.target.files;
}

1 commentaires

ChangeEvent n'est pas un type valide dans Typescript ou Angular

0
votes

public onChange(event: Event): void {
    const input = event.target as HTMLInputElement;

    if (!input.files?.length) {
        return;
    }

    const file = input.files[0];
    console.log(file);
}

0 commentaires