Помилка Angular @ViewChild (): Очікується 2 аргументи, але отримано 1

При спробі ViewChild я отримую помилку. Помилка "Аргумент для" opts "не надано."

Обидва @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.

У Angular 8 ViewChild приймає 2 параметри

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

Кутовий 8

У куті 8 у ViewChild є ще один параметр

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

Більше про це можна прочитати тут і тут

Кутовий 9

За Angular 9замовчуванням значення є static: false, тому не потрібно вказувати парам, якщо ви не хочете використовувати{static: true}

У кутовій 8 ViewChildприймає 2 параметри:

Спробуйте так:

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

Пояснення:

{static: false}

Якщо встановити статичну помилку , компонент ЗАВЖДИ ініціалізується після ініціалізації перегляду вчасно для ngAfterViewInit/ngAfterContentInitфункцій зворотного виклику.

{static: true}

Якщо встановити статичну істину , ініціалізація відбудеться при ініціалізації перегляду в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

це тому, що дитина перегляду вимагає двох аргументів спробуйте так

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

@ViewChild ('iznosInput', {static: false,}) iznosInputRef: ElementRef;

У Angular 8 ViewChild завжди бере 2 парами, а другий парам завжди має статичну форму : true або static: false

Ви можете спробувати так:

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

Також, static: falseце буде стандартна поведінка за замовчуванням у Angular 9.

Що таке статичні помилкові / правдиві: Отже, як правило, ви можете перейти до наступного:

• { static: true } потрібно встановити, коли ви хочете отримати доступ до ViewChild в ngOnInit.

  { static: false }можна отримати доступ лише в ngAfterViewInit. Це також те, що ви хочете зробити, коли у вас є елемент структури в шаблоні (тобто * ngIf).

Regex для заміни всіх через IDEA (тестовано за допомогою Webstorm)

Знайти: \@ViewChild\('(.*)'\)

Замінити: \@ViewChild\('$1', \{static: true\}\)

ви повинні використовувати другий аргумент з ViewChild таким чином:

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

Використовуй це

@ViewChild (ChildDirective, {static: false}) Компонент

У куті 8 у ViewChild є ще один параметр

Компонент @ViewChild ('nameInput', {static: false})

Я вирішив свою проблему, як нижче

@ViewChild (MatSort, {static: false}) сортування: MatSort;

Це також вирішило мою проблему.

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