how to display array in array angular 4

Question

I want to display this list, but I could not access town attribute.

How could I fix my pb?

{ "id":"1",
      "name":"Hotel Ritz",
      "address":[
        {
         "country":"France",
         "town":"Paris",
        }
      ],
      "visited":true
    }
    { 
      "id":"2",
      "name":"The Plaza",
      "address":[
        {
         "country":"USA",
         "town":"New York"
        }
      ],
      "visited":false
    }

And what's the best method to display a checkbox to change the value of attribute visited? I tried this code but it does not work:

 <ul class="hotel-list">  
      <li ng-repeat="hotel in hotels">
        <span>{{hotel.name}}<span>
      </li> 
      <ul>
        <li *ngFor="let towm of hotel.address">{{address.town}}</li>
     </ul>
 </ul>

Igor · Accepted Answer · 2018-03-14 16:19:38Z

ng-repeat is angularjs syntax. *ngFor is angular syntax. You can't mix/match these, pick the correct syntax for the framework you are using.
In the HTML you reference towm which should be town
If you use let addressPart in your ngFor then you can reference that directly inside the scope of that element.
Your HTML syntax is not correct. ul contains li and not another ul element directly in it. You also have elements that don not have a matching closing tag.

<ul class="hotel-list">  
    <li *ngFor="let hotel of hotels">
        <span>{{hotel.name}}<span>
        <br/>
        Visited: <input type="checkbox" [(ngModel)]="hotel.visited" />
    </li> 
    <li>
        <ul>
            <li *ngFor="let addressPart of hotel.address">{{addressPart.town}}</li>
        </ul>
    </li> 
</ul>

Binding a value, like the visited property to a checkbox, is core concept of angular. In the above example I added 2 way binding. You can see more in the Template Syntax documentation.

Overall the angular documentation is very well written and has everything from tutorials to fundamental concepts to in depth API documentation. I recommend you check it out.

Collectives™ on Stack Overflow

how to display array in array angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related