CODEWITHSUNDEEP
angular
VicSan
VicSan

Reputation: 119

Button value property undefined when using ngFor and accessing it using (click) -Angular 8

Im trying to set a variable called fecha using the value defined in a dropdown list defined with ngFor.

I first get all of the list values and then iterate on them using ngFor like this 

<li class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor ="let fecha of fechas">
                    <button class="dropdown-item"  type="submit" *ngFor ="let fecha of fechas" (click)= "setFecha(this.value)" value="{{fecha._id}}">{{fecha._id}}</button>
                </li>

However when i click on the button the console returns 

ERROR TypeError: "fecha is undefined"

Is there an error when i pass the value to the function or is it a wrong way of accessing the value of the button

Upvotes: 2

Views: 700

Answers (2)

Mohamed Farouk
Mohamed Farouk

Reputation: 1107

Try changing this to fecha Also I noticed you have nested for loop, is this intended?

<li class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor ="let fecha of fechas">
                    <button class="dropdown-item"  type="submit" *ngFor ="let fecha of fechas" (click)= "setFecha(fecha)" value="{{fecha._id}}">{{fecha._id}}</button>
                </li>

If nested for loop is not intended, code should look like

<li class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor ="let fecha of fechas">
   <button class="dropdown-item"  type="submit"  (click)= "setFecha(fecha)" value="{{fecha._id}}">{{fecha._id}}</button>
</li>

Upvotes: 2

r0secr01x
r0secr01x

Reputation: 224

You have ngFor on your li and your button.

Try something like:

<li class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor ="let fecha of fechas">
   <button class="dropdown-item"  type="submit" (click)= "setFecha(fecha)" value="{{fecha._id}}">{{fecha._id}}</button>

Upvotes: 2

Related Questions