Question

我想在Angular 6应用程序的HTML模板中显示名称和photoUrl，如何仅在以下数组中访问名称和photoUrl元素：

{
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}

{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
}

Answer 1

您可以使用Angular提供的*ngFor指令

.component.html

<div *ngFor="let user of users">
 <div *ngFor="let value of values;i = index">
  <div>{{value.name}}</div>
  <div>{{value.photoUrl}}</div>
 </div>
<div>

.component.ts

users = [
 {
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}.
{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
 }
]

Answer 2

您的JSON无效，但是我进行了一些调整

[{ “ key”：“ key0”， “值”：[ { “ id”：567657， “ name”：“ Jess”， “ photoUrl”：“ https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg”， “评分”：30 }， { “ id”：3242432， “ name”：“ Ryan”， “ photoUrl”：“ https://d3iw72m71ie81c.cloudfront.net/male-29.jpg”， “评分”：5 } ]}，{ “ key”：“ key1”， “值”：[ { “ id”：567657， “ name”：“ Jess”， “ photoUrl”：“ https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg”， “评分”：30 }， { “ id”：6757587， “ name”：“ Sarah”， “ photoUrl”：“ https://d3iw72m71ie81c.cloudfront.net/female-70.jpg”， “评分”：16 } ]}]

，您只需要如下嵌套ngFor，

<ul>
    <li *ngFor="let group of myArray">
    {{group.name}}
    <ul>
        <li *ngFor="let light of group.value">
            <h1>Photo </h1>  {{light.photoUrl}}
            <h1>Name </h1>    {{light.name}}
        </li>
    </ul>
    </li>
</ul>

STACKBLITZ DEMO

Answer 3

component.ts

user_Array = [
 {
   "key":"key0",
   "value":[
      {
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {
     "id":3243242,
     "name":"Ryan",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
     "rating":5
  }
   ]
}.
{  
   "key":"key1",
   "value":[  
  {  
     "id":567657,
     "name":"Jess",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
     "rating":30
  },
  {  
     "id":6757587,
     "name":"Sarah",
     "photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
     "rating":16
  }
   ]
 }
]

component.html

 <div *ngFor="let user of user_Array">
     <span>{{user?.name}}</span>
     <img src="{{user?.photoUrl}}">

    <div>

评论通过添加 '？'如果该特定变量不存在，则html文件不会生成错误。总是可以添加“？”在访问ts变量

时

如何从数组访问项目

3 个答案: