[英]Angular display Object in array via *ngFor
我有以下一组数据,这些数据来自我想通过模板中的“ * ngFor”显示的JSON文件。 我可以显示除“人物”对象之外的大多数对象。 可以有任意数量的“人”对象。 此示例数据集仅包含2个。
[{
"caseNumber": "01/01/2020",
"caseData": {
"caseType": "Criminal",
"caseCompName": "",
"caseCompNumber": "12121212",
"caseDate": "01/02/2019",
"caseTime": "12:00",
"caseStatus": "Open"
},
"people": [{
"name": "Paul",
"lastName": "Von Zeuner",
"middleName": "Waldemar",
"dob": "1981-09-29",
"countryBirth": "South Africa"
},{
"name": "John",
"lastName": "Doe",
"middleName": "Steve",
"dob": "1981-09-29",
"countryBirth": "South Africa"
}]
}]
我尝试过类似的操作,但只显示第一人称。 我不确定数组本身的结构是否错误或* ngFor是否存在问题
<div *ngFor='let item of caseData; let i=index'>
<div class="row">
<div class="col-sm">
Name: {{item.people[i].name}}
</div>
<div class="col-sm">
Last Name: {{item.people[i].lastName}}
</div>
</div>
<div class="row">
<div class="col-sm">
Middel Name: {{item.people[i].middleName}}
</div>
<div class="col-sm">
Country of Birth: {{item.people[i].countryBirth}}
</div>
</div>
</div>
请帮我
我已经在stackblitz上创建了一个工作示例,看看吧。
在component.ts中
data =[{
"caseNumber": "01/01/2020",
"caseData": {
"caseType": "Criminal",
"caseCompName": "",
"caseCompNumber": "12121212",
"caseDate": "01/02/2019",
"caseTime": "12:00",
"caseStatus": "Open"
},
"people": [{
"name": "Paul",
"lastName": "Von Zeuner",
"middleName": "Waldemar",
"dob": "1981-09-29",
"countryBirth": "South Africa"
},{
"name": "John",
"lastName": "Doe",
"middleName": "Steve",
"dob": "1981-09-29",
"countryBirth": "South Africa"
}]
}];
在component.html中
<div *ngFor='let item of data; let i=index'>
<div *ngFor="let person of item.people">
<div class="row">
<div class="col-sm">
Name: {{person.name}}
</div>
<div class="col-sm">
Last Name: {{person.lastName}}
</div>
</div>
<div class="row">
<div class="col-sm">
Middel Name: {{person.middleName}}
</div>
<div class="col-sm">
Country of Birth: {{person.countryBirth}}
</div>
<br>
</div>
</div>
</div>
尝试这个
<div *ngFor='let item of people; let i=index'>
<div class="row">
<div class="col-sm">
Name: {{item.name}}
</div>
<div class="col-sm">
Last Name: {{item.lastName}}
</div>
</div>
<div class="row">
<div class="col-sm">
Middel Name: {{item.middleName}}
</div>
<div class="col-sm">
Country of Birth: {{item.countryBirth}}
</div>
</div>
</div>
您应该在HTML中使用2 ngFor。
试试这个代码:
<div *ngFor='let item of caseData; let i=index'>
<div *ngFor="let person of item.people" class="row">
<div class="col-sm">
Name: {{person.name}}
</div>
<div class="col-sm">
Last Name: {{person.lastName}}
</div>
<div class="col-sm">
Middel Name: {{person.middleName}}
</div>
<div class="col-sm">
Country of Birth: {{person.countryBirth}}
</div>
</div>
</div>
JSON数组仅包含1个具有3个属性的对象: caseNumber , caseData和people是对象数组。
您需要使用ngFor遍历caseData时,需要遍历整个数据数组 ,然后遍历people数组,如下所示:
ComponentName.ts:
dataArray =
[{
"caseNumber": "01/01/2020",
"caseData": {
"caseType": "Criminal",
"caseCompName": "",
"caseCompNumber": "12121212",
"caseDate": "01/02/2019",
"caseTime": "12:00",
"caseStatus": "Open"
},
"people": [{
"name": "Paul",
"lastName": "Von Zeuner",
"middleName": "Waldemar",
"dob": "1981-09-29",
"countryBirth": "South Africa"
},{
"name": "John",
"lastName": "Doe",
"middleName": "Steve",
"dob": "1981-09-29",
"countryBirth": "South Africa"
}]
}]
ComponentName.html
<div *ngFor='let item of dataArray; let i=index'>
<div *ngFor='let person of item.people'>
<div class="row">
<div class="col-sm">
Name: {{person.name}}
</div>
<div class="col-sm">
Last Name: {{person.lastName}}
</div>
</div>
<div class="row">
<div class="col-sm">
Middel Name: {{person.middleName}}
</div>
<div class="col-sm">
Country of Birth: {{person.countryBirth}}
</div>
</div>
</div>
</div>
<div *ngFor='let item of caseData'>
<div *ngFor='let person of item.people'>
<div class="row">
<div class="col-sm">
Name: {{person.name}}
</div>
<div class="col-sm">
Last Name: {{person.lastName}}
</div>
</div>
<div class="row">
<div class="col-sm">
Middel Name: {{person.middleName}}
</div>
<div class="col-sm">
Country of Birth: {{person.countryBirth}}
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.