How to put ngFor value in input element

Ionic Framework ionic-v3
1 
<ion-list>
            <ion-item *ngFor = "let match of matches">
                {{match}}
            </ion-item>
        </ion-list>

Hi i want to put the  {{match}} value in input element is it possible?
2

https://angular.io/guide/template-syntax

3

Thanks for the suggestion but, i’m getting empty input box the value of {{match}} is not reflecting to that input.

<div *ngFor = "let match of matches"></div>
<input #matchInput>{{matchInput.value}}
4

do console.log(this.matches) and display output here.

5

value is coming in console.log but not not coming in input box

6

Here’s an example. At surface level this is a very easy problem to solve, it’s basic Angular.

However if you have an array of just strings or numbers (I have no idea what your array is of since that isn’t posted), it can get a little tricky.

But at it’s basic level it’s just simple Angular binding.

However if your array is of a primitive type, it gets a little tricky because you need a trackBy function. It will still work without it, but your inputs will lose focus.

<div *ngFor="let test of tests; let i = index; trackBy: trackByFn">
  <input [(ngModel)]="tests[i]"/>
</div>

export class AppComponent {
  tests = ['a', 'b', 'c'];

  trackByFn(index: any, item: any) {
   return index;
  } 
}

Edit: This assumes you actually want two way binding, which I mean I assume you do but…you don’t specify that in your question.

2 Likes
7

Thanks for the support.Actually i’m getting the value in input by using ngModel but when i try to change the value which is reflected in my input box i’m getting below error
NgFor only supports binding to iterable such as Arrays

8

Did you read my example? Did you go out to the actual running example on stackblitz that I made for you? Have you posted the updated code where “you are getting the input value by using ngModel”? Did you bother actually posting what matches is? :weary:

9

just now i updated the codepls check once

10

I have no idea what you are talking about. What did you update?

11

pls check the stack blitz once then you will understand

12

Maybe you should check it. Because I don’t think you know how it works.

13

Why won’t you respond to the two very clear and explicit requests for how matches is declared and populated? It seems a virtual certainty that therein lies the bug.

14

issue cleared thank you

15

please how did u solve your problem, cause i’m working with the same issue , i need to memorize the value of matches from the speech recognition and send it by a http client sever?

16

How did you clear the issue please?