我是Angular的新手，面临的问题是如何从本地.json文件中获取->标题和->图片->名称

Question

请仔细考虑我的代码并给我一些建议，我想使用* ngFor循环显示我的app.component.html文件中的所有图像，在此先感谢。

This is my app.component.html file code

<app-nav></app-nav>
<div class="container mt-4">
  <router-outlet></router-outlet>
</div>
<ul>
  <li *ngFor="let users of Users">
    <h2>{{users.name}}</h2>
  </li>
</ul>



This is my data.json file code

{
    "about": {
    "title":"STORY ABOUT US",
    "subtitle":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
      incididunt ut labore et",
    "images":[
      {
        "name":"aa1.jpg",
        "id":1,
        "link":"http://google.com/",
        "icon":"fa fa-link"
      },
      {
        "name":"aa2.jpg",
        "id":2,
        "link":"http://google.com/",
        "icon":"fa fa-link"
      }
    ]
}

Answer 1

您可以通过两种方式访问​​对象属性

1

object.propertyName

2

object ['propertyName']

因此将您的json文件导入到对象中，并像这样访问其属性

  <li *ngFor="let users of Users">
     <h2>{{users.name}}</h2>
     <h2>{{users.title}}</h2>
     <h2>{{users.image.name}}</h2>
     <h2>{{users.image.id}}</h2>
 </li>