I have used the following code to assign the loadedIngredient
an object through this code.
The code I used is
import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { Ingredient } from '../../shared/Ingredient.model';
@Component({
selector: 'app-shopping-list-edit',
templateUrl: './shopping-list-edit.component.html',
styleUrls: ['./shopping-list-edit.component.css']
})
export class ShoppingListEditComponent implements OnInit {
@ViewChild('name') ingredientName:ElementRef;
@ViewChild('amount') ingredientAmount:ElementRef;
@Output() inputValue = new EventEmitter<Ingredient>();
constructor() { }
ngOnInit() {
}
onSubmit(){
const iname = this.ingredientName.nativeElement.value;
const iamount = this.ingredientAmount.nativeElement.value;
loadedIngredient:Ingredient = new Ingredient(iname,iamount);
this.inputValue.emit(loadedIngredient);
}
}
The errors that keep popping up is.
ERROR in src/app/shopping-list/shopping-list-edit/shopping-list-edit.component.t s(21,4): error TS7028: Unused label. src/app/shopping-list/shopping-list-edit/shopping-list-edit.component.ts(21,21): error TS2539: Cannot assign to 'Ingredient' because it is not a variable. src/app/shopping-list/shopping-list-edit/shopping-list-edit.component.ts(22,25): error TS2304: Cannot find name 'loadedIngredient'.
Can anyone please help.
Effectively you are attempting to reference an undeclared variable by the looks of it, which TypeScript will treat as an error. One solution is you could initialize a class property loadedIngredient
and reference with this
in methods such as onSubmit()
:
import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { Ingredient } from '../../shared/Ingredient.model';
@Component({
selector: 'app-shopping-list-edit',
templateUrl: './shopping-list-edit.component.html',
styleUrls: ['./shopping-list-edit.component.css']
})
export class ShoppingListEditComponent implements OnInit {
@ViewChild('name') ingredientName:ElementRef;
@ViewChild('amount') ingredientAmount:ElementRef;
@Output() inputValue = new EventEmitter<Ingredient>();
loadedIngredient: Ingredient;
constructor() { }
ngOnInit() {}
onSubmit(){
const iname = this.ingredientName.nativeElement.value;
const iamount = this.ingredientAmount.nativeElement.value;
this.loadedIngredient: Ingredient = new Ingredient(iname, iamount);
this.inputValue.emit(this.loadedIngredient);
}
}
Or you need to specify a variable scope such as var
, let
, const
for the local variable loadedIngredient
within onSubmit()
:
onSubmit(){
const iname = this.ingredientName.nativeElement.value;
const iamount = this.ingredientAmount.nativeElement.value;
const loadedIngredient: Ingredient = new Ingredient(iname, iamount);
this.inputValue.emit(this.loadedIngredient);
}
Thanks to the generous @lealceldeiro, here a StackBlitz demonstrating the error/solution.
Hopefully that helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.