web-dev-qa-db-fra.com

Angular @ViewChild () error: 2 arguments attendus, mais 1 obtenu

Lorsque j'essaie viewchild, j'obtiens l'erreur. l'erreur est "Un argument pour 'opts' n'a pas été fourni."

@ViewChild donne à la fois l'erreur.

import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core';
import { Ingredient } from 'src/app/shared/ingredient.model';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {

@ViewChild('nameInput') nameInputRef: ElementRef;
@ViewChild('amountInput') amountInputRef: ElementRef;
@Output() ingredientAdded = new EventEmitter<Ingredient>();
  constructor() {}

  ngOnInit() {
  }

  onAddItem() {
    const ingName = this.nameInputRef.nativeElement.value;
    const ingAmount = this.amountInputRef.nativeElement.value;
    const newIngredient = new Ingredient(ingName, ingAmount);
    this.ingredientAdded.emit(newIngredient);
  }

}

ts (11,2): erreur TS2554: 2 arguments attendus, mais 1 obtenu.

angulartypescript
219
stack overflow

Dans Angular 8, ViewChild prend 2 paramètres

 @ViewChild(ChildDirective, {static: false}) Component
411
Jensen

Angulaire 8

Dans Angular 8, ViewChild a un autre paramètre

@ViewChild('nameInput', {static: false}) component

Vous pouvez en savoir plus ici et ici

Angulaire 9

Dans Angular 9 la valeur par défaut est static: false, n'a donc pas besoin de fournir de param sauf si vous voulez utiliser {static: true}

74
Reza

Dans Angular 8, ViewChild prend 2 paramètres:

Essayez comme ceci:

@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;

Explication:

{statique: faux}

Si vous définissez statique faux , le composant est TOUJOURS initialisé après l'initialisation de la vue à temps pour le ngAfterViewInit/ngAfterContentInit fonctions de rappel.

{statique: vrai}

Si vous définissez static true , l'initialisation aura lieu lors de l'initialisation de la vue à ngOnInit

Par défaut, vous pouvez utiliser { static: false }. Si vous créez une vue dynamique et souhaitez utiliser la variable de référence du modèle, vous devez utiliser { static: true}

Pour plus d'informations, vous pouvez lire ceci article

Démo de travail

Dans la démo, nous allons faire défiler jusqu'à un div en utilisant la variable de référence du modèle.

 @ViewChild("scrollDiv", { static: true }) scrollTo: ElementRef;

Avec { static: true }, on peut utiliser this.scrollTo.nativeElement dans ngOnInit, mais avec { static: false }, this.scrollTo sera undefined dans ngOnInit, nous pouvons donc y accéder uniquement dans ngAfterViewInit

21
Adrita Sharma

c'est parce que la vue enfant nécessite deux arguments, essayez comme ceci

@ViewChild ('nameInput', {statique: faux,}) nameInputRef: ElementRef;

@ViewChild ('amountInput', {statique: faux,}) amountInputRef: ElementRef;

5
paras shah

Dans Angular 8, ViewChild prend toujours 2 paramètres, et les seconds paramètres ont toujours statique: vrai ou statique: faux

Vous pouvez essayer comme ceci:

@ViewChild('nameInput', {static: false}) component

Également static: false va être le comportement de secours par défaut dans Angular 9.

Ce qui est statique faux/vrai: Donc, en règle générale, vous pouvez opter pour les éléments suivants:

  • { static: true } doit être défini lorsque vous souhaitez accéder à ViewChild dans ngOnInit.

    { static: false } n'est accessible que dans ngAfterViewInit. C'est aussi ce que vous voulez faire lorsque vous avez une directive structurelle (c'est-à-dire * ngIf) sur votre élément dans votre modèle.

1
Pinki Dhakad

Regex pour remplacer tout via IDEA (testé avec Webstorm)

Rechercher: \@ViewChild\('(.*)'\)

Remplacez: \@ViewChild\('$1', \{static: true\}\)

0
Torsten Simon