कोणीय @ViewChild () त्रुटि: अपेक्षित 2 तर्क, लेकिन 1 मिला

Question

ViewChild की कोशिश करते समय मुझे त्रुटि मिल रही है। त्रुटि यह है कि "ऑप्स 'के लिए एक तर्क प्रदान नहीं किया गया था।"

दोनों @ViewChild त्रुटि दे रहा है।

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): त्रुटि TS2554: अपेक्षित 2 तर्क, लेकिन 1 मिला।

Comments

11 लाइन में क्या है?

— टोनी नेगो

@TonyNgo @ViewChild ('nameInput') nameInputRef: ElementRef;

— स्टैक ओवरफ्लो

Answer 1

कोणीय 8 में, ViewChild 2 पैरामीटर लेता है

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

Comments

क्या आप इसे स्वीकार कर सकते हैं? कोणीय डॉक्स से: स्थैतिक - परिवर्तन का पता लगाने से पहले क्वेरी परिणामों को हल करना है या नहीं (यानी केवल स्थैतिक परिणाम लौटाएं)। यदि यह विकल्प प्रदान नहीं किया जाता है, तो कंपाइलर अपने डिफ़ॉल्ट व्यवहार पर वापस आ जाएगा, जो क्वेरी रिज़ॉल्यूशन के समय को निर्धारित करने के लिए क्वेरी परिणामों का उपयोग करना है। यदि कोई क्वेरी परिणाम एक नेस्टेड दृश्य (जैसे * एनजीआईएफ) के अंदर हैं, तो परिवर्तन का पता लगाने के बाद क्वेरी को हल किया जाएगा। अन्यथा, परिवर्तन खोज रन से पहले इसे हल किया जाएगा।

— जेन्सन

आपको उस उत्तर को जोड़ना चाहिए यदि आप चाहते हैं कि वह आपके उत्तर को सर्वश्रेष्ठ के रूप में स्वीकार करे

— Sytham

नोट: आपके पास कोणीय 7 में जो व्यवहार था, उसे रखने के लिए आपको निर्दिष्ट करने की आवश्यकता है { static: true }। ng updateजहाँ आवश्यक हो, स्वचालित रूप से ऐसा करने में आपकी सहायता करेगा। या, यदि आपने पहले से ही अपनी निर्भरता को कोणीय 8 में अपग्रेड कर लिया है, तो यह कमांड आपके कोड को माइग्रेट करने में मदद करेगी:ng update @angular/core --from 7 --to 8 --migrate-only

— badkos

यदि तत्व को ngOnInit के दौरान उपलब्ध होने की आवश्यकता है, तो स्थिर होने की आवश्यकता है true, लेकिन यदि यह init के बाद तक प्रतीक्षा कर सकता है false, जिसका अर्थ है कि यह ngAfterViewInit / ngAfterContentInit तक उपलब्ध नहीं होगा।

— अर्मेन ज़करियन

मुझे नहीं पता था। धन्यवाद। :-)

— तंजील

Answer 2

कोणीय 8

कोणीय 8 में, ViewChild का एक और परम है

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

आप इसके बारे में यहाँ और यहाँ पढ़ सकते हैं

कोणीय 9

में Angular 9डिफ़ॉल्ट मान है static: false, तो परम प्रदान करने के लिए जब तक आप उपयोग करना चाहते हैं की जरूरत नहीं है{static: true}

Comments

आपके द्वारा लिंक किए गए लेखों में से एक में, वे जैसे वाक्य रचना दिखाते हैं @ContentChild('foo', {static: false}) foo !: ElementRef;। मैं विस्मयादिबोधक चिह्न के बारे में उत्सुक हूं। क्या एंगुलर 8 के साथ भी कुछ नया है?

— कोनराड विल्टर्स्टन

@KonradViltersten इस stackoverflow.com/a/56950936/2279488

— रेजा

Answer 3

कोणीय 8 में, ViewChild2 पैरामीटर लेता है:

इस तरह की कोशिश करें:

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

स्पष्टीकरण:

{स्थिर: गलत}

यदि आप स्थैतिक असत्य सेट करते हैं , तो ngAfterViewInit/ngAfterContentInitकॉलबैक फ़ंक्शंस के लिए समय में दृश्य आरंभीकरण के बाद घटक ALWAYS आरंभ हो जाता है ।

{स्थिर: सत्य}

यदि आप स्थैतिक सत्य को सेट करते हैं , तो आरंभिक दृश्य आरंभ में होगाngOnInit

डिफ़ॉल्ट रूप से आप उपयोग कर सकते हैं { static: false }। यदि आप एक गतिशील दृश्य बना रहे हैं और टेम्पलेट संदर्भ चर का उपयोग करना चाहते हैं, तो आपको उपयोग करना चाहिए{ static: true}

अधिक जानकारी के लिए, आप इस लेख को पढ़ सकते हैं

वर्किंग डेमो

डेमो में, हम टेम्प्लेट संदर्भ संदर्भ चर का उपयोग करके एक div तक स्क्रॉल करेंगे।

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

साथ { static: true }में, हम का उपयोग कर सकते this.scrollTo.nativeElementमें ngOnInitहै, लेकिन साथ { static: false }, this.scrollToहो जाएगा undefinedमें ngOnInit, इसलिए हम केवल में में उपयोग कर सकते हैंngAfterViewInit

Answer 4

यह इसलिए है क्योंकि दृश्य बच्चे को इस तरह से दो तर्क प्रयास करने की आवश्यकता होती है

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

@ दृश्यचिल्ड ('राशिइन्पुट', {स्थैतिक: असत्य,}) राशिइन्पुटइरीफ: एलिमेंटरिफ़;

Answer 5

कोणीय 8 में, ViewChild हमेशा 2 Param लेता है, और दूसरे Params में हमेशा स्थिर: सही या स्थिर: false होता है

आप इस तरह की कोशिश कर सकते हैं:

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

इसके अलावा, static: falseकोणीय 9 में डिफ़ॉल्ट फ़ॉलबैक व्यवहार होने जा रहा है।

स्थिर झूठे / सच क्या हैं: इसलिए अंगूठे के एक नियम के रूप में आप निम्नलिखित के लिए जा सकते हैं:

• { static: true } जब आप ngOnInit में ViewChild का उपयोग करना चाहते हैं, तो इसे सेट करने की आवश्यकता है।

  { static: false }केवल ngAfterViewInit में पहुँचा जा सकता है। यह वह भी है जब आप अपने टेम्पलेट में अपने तत्व पर एक संरचनात्मक निर्देश (यानी * ngIf) के लिए जाना चाहते हैं।

Answer 6

IDEA के माध्यम से सभी को बदलने के लिए Regex (वेबस्टॉर्म के साथ परीक्षण)

खोजें: \@ViewChild\('(.*)'\)

बदलने के: \@ViewChild\('$1', \{static: true\}\)

Answer 7

आपको ViewChild के साथ दूसरे तर्क का उपयोग करना चाहिए:

@ViewChild("eleDiv", { static: false }) someElement: ElementRef;

Answer 8

इसे इस्तेमाल करो

@ दृश्यचाइल्ड (चाइल्डडायरेक्टिव, {स्टैटिक: गलत}) घटक

Answer 9

कोणीय 8 में, ViewChild का एक और परम है

@ दृश्यचाइल्ड ('nameInput', {static: false}) घटक

मैंने अपना मुद्दा नीचे की तरह हल किया

@ व्यूचाइल्ड (MatSort, {static: false}) सॉर्ट: MatSort;

Answer 10

इससे मेरी समस्या भी हल हो गई।

@ViewChild('map', {static: false}) googleMap;