Display array elements in different tags

Question

I want to loop over an object and display every object in a different tag.

For example, if I have this array:

x = [{'a': 1, 'b': 2}, {'a': 3, 'b': 4}]

I want to display something like this:

first: 1
second: 2

first: 3
second: 4

I tried this:

<ng-container *ngFor="let p of x">
    <div>
        <label for="recipient-a" class="col-form-label">first:</label>
        <input class="form-control" id="recipient-a" type="text" name="a" #name="ngModel" [(ngModel)]="p.a">
    </div>

    <div>
        <label for="recipient-b" class="col-form-label">second:</label>
        <input class="form-control" id="recipient-b" type="text" name="b" #name="ngModel" [(ngModel)]="p.b">
    </div>
</ng-container>

But this will display only the second element:

first: 3
second: 4

first: 3
second: 4

How can I modify the code to achieve what I want? Thank you for your time!

Pratap A.K · Accepted Answer · 2018-09-20 09:02:12Z

1

Please try this

<ng-container *ngFor="let p of x;">
    First: {{p.a}}
    <input class="form-control" type="text" [(ngModel)]="p.a">
    Second: {{p.b}}
    <input class="form-control" type="text" [(ngModel)]="p.b">
</ng-container>

edited Sep 20, 2018 at 9:02

answered Sep 20, 2018 at 8:57

Pratap A.K

4,52715 gold badges49 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachin Shah · Accepted Answer · 2018-09-20 09:02:51Z

1

<ng-container *ngFor="let p of x">
  <div>
    <label for="recipient-a" class="col-form-label">first:{{p.a}}</label>
    <input class="form-control" id="recipient-a" type="text" name="a" #name="ngModel" [(ngModel)]="p.a">
  </div>

  <div>
    <label for="recipient-b" class="col-form-label">second:{{p.b}}</label>
    <input class="form-control" id="recipient-b" type="text" name="b" #name="ngModel" [(ngModel)]="p.b">
  </div>

answered Sep 20, 2018 at 9:02

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

Collectives™ on Stack Overflow

Display array elements in different tags

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related