Kesalahan @ViewChild () sudut: Diharapkan 2 argumen, tetapi ada 1

249

Saat mencoba ViewChild saya mendapatkan kesalahan. Kesalahan adalah "Argumen untuk 'opts' tidak disediakan."

@ViewChild Baik memberikan kesalahan.

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): error TS2554: Diharapkan 2 argumen, tetapi mendapat 1.

angular typescript stack overflow
sumber
Apa yang ada di baris 11?
Tony Ngo
@TonyNgo @ViewChild ('nameInput') nameInputRef: ElementRef;
stack overflow

Jawaban:

497

Di Angular 8, ViewChild mengambil 2 parameter 

 @ViewChild(ChildDirective, {static: false}) Component
Jensen
sumber
9
dapatkah Anda menandainya sebagai diterima? Dari Dokumen sudut: statis - apakah akan menyelesaikan hasil kueri atau tidak sebelum deteksi pendeteksian berjalan (yaitu hanya mengembalikan hasil statis). Jika opsi ini tidak disediakan, kompiler akan kembali ke perilaku standarnya, yaitu menggunakan hasil kueri untuk menentukan waktu resolusi kueri. Jika ada hasil kueri di dalam tampilan bersarang (mis. * NgIf), kueri akan diselesaikan setelah perubahan deteksi berjalan. Kalau tidak, itu akan diselesaikan sebelum perubahan deteksi berjalan.
Jensen
12
Anda harus menambahkan itu ke jawaban jika Anda ingin dia menerima jawaban Anda sebagai yang terbaik
Sytham
14
Catatan: untuk menjaga perilaku yang Anda miliki di Angular 7, Anda harus menentukan { static: true }. ng updateakan membantu Anda melakukan ini secara otomatis jika diperlukan. Atau, jika Anda sudah ng update @angular/core --from 7 --to 8 --migrate-only
memutakhirkan
11
Jika elemen perlu tersedia selama ngOnInit, maka statis harus ada true, tetapi jika itu bisa menunggu sampai setelah init false, maka itu berarti, itu tidak akan tersedia sampai ngAfterViewInit / ngAfterContentInit.
Armen Zakaryan
Saya tidak tahu itu. Terima kasih. :-)
Tanzeel
84

Sudut 8

Di Angular 8, ViewChild memiliki param lainnya

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

Anda dapat membaca lebih lanjut tentang ini di sini dan di sini

Sudut 9

Dalam Angular 9nilai default static: false, sehingga tidak perlu menyediakan param kecuali jika Anda ingin menggunakan{static: true}

Reza
sumber
Di salah satu artikel yang Anda tautkan, mereka menunjukkan sintaksis seperti @ContentChild('foo', {static: false}) foo !: ElementRef;. Saya ingin tahu tentang tanda seru. Apakah itu sesuatu yang baru dengan Angular 8 juga?
Konrad Viltersten
1
@KonradViltersten lihat stackoverflow.com/a/56950936/2279488
Reza
26

Dalam Angular 8, ViewChild dibutuhkan 2 parameter:

Coba seperti ini:

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

Penjelasan:

{static: false}

Jika Anda menetapkan false false , komponen SELALU akan diinisialisasi setelah inisialisasi tampilan tepat waktu untuk ngAfterViewInit/ngAfterContentInitfungsi-fungsi panggilan balik.

{static: true}

Jika Anda menyetel true true , inisialisasi akan berlangsung pada tampilan inisialisasi dingOnInit

Secara default Anda dapat menggunakan { static: false }. Jika Anda membuat tampilan dinamis dan ingin menggunakan variabel referensi templat, maka Anda harus menggunakannya{ static: true}

Untuk info lebih lanjut, Anda dapat membaca artikel ini

Demo yang Bekerja

Dalam demo, kita akan gulir ke div menggunakan variabel referensi templat.

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

Dengan { static: true }, kita dapat menggunakan this.scrollTo.nativeElementdi ngOnInit, tetapi dengan { static: false }, this.scrollToakan undefineddi ngOnInit, sehingga kita dapat mengakses hanya dingAfterViewInit

Adrita Sharma
sumber
6

itu karena view child memerlukan dua argumen coba seperti ini

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

@ViewChild ('numberInput', {static: false,}) numberInputRef: ElementRef;

paras shah
sumber
3

Dalam Angular 8, ViewChild selalu mengambil 2 param, dan params kedua selalu memiliki static: true atau static: false

Anda dapat mencoba seperti ini:

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

Juga static: false ini akan menjadi perilaku fallback default di Angular 9.

Apa yang statis salah / benar: Jadi sebagai aturan praktis Anda dapat mengikuti yang berikut:

  • { static: true } perlu diatur ketika Anda ingin mengakses ViewChild di ngOnInit.

    { static: false }hanya dapat diakses di ngAfterViewInit. Ini juga yang Anda inginkan ketika Anda memiliki arahan struktural (yaitu * ngIf) pada elemen Anda di templat Anda.

Pinki Dhakad
sumber
1

Regex untuk mengganti semua melalui IDEA (diuji dengan Webstorm)

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

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

Torsten Simon
sumber
1

Anda harus menggunakan argumen kedua dengan ViewChild seperti ini:

@ViewChild("eleDiv", { static: false }) someElement: ElementRef;
Hammad Ahmad
sumber
1

Gunakan ini

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

Dhilrukshan Pradeep
sumber
0

Di Angular 8, ViewChild memiliki param lainnya

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

Saya menyelesaikan masalah saya seperti di bawah ini

@ViewChild (MatSort, {static: false}) sort: MatSort;

pengguna2660331
sumber
-5

Itu juga menyelesaikan masalah saya.

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