我目前正在使用Angular2 / Typescript进行编程，我被表格阻止了。我想填写一张表格，其中包含我从我的服务中收到的信息，如下所示：
[
{
"id": 1,
"serviceWindow": "24/7",
"status": "Active",
"customer": "BGL",
"serviceProvidedType": "Call Desk",
"drpContactList": [
{
"id": null,
"name": "Jean Bon",
"timeStart": "08:00",
"timeEnd": "16:00",
"value": "jean.bon@ctg.com",
"mediumType": "Email"
},
{
"id": null,
"name": "Charles Degaule",
"timeStart": "16:00",
"timeEnd": "19:00",
"value": "+352 258 484 494",
"mediumType": "SMS"
}
]
},
{
"id": 2,
"serviceWindow": "Week-end",
"status": "Active",
"customer": "POST",
"serviceProvidedType": "Monitoring",
"drpContactList": [
{
"id": null,
"name": "Michel Palmas",
"timeStart": "10:00",
"timeEnd": "15:00",
"value": "+352 658 194 191",
"mediumType": "Phone"
}
]
},
{
"id": 3,
"serviceWindow": "Business hours",
"status": "Active",
"customer": "ING",
"serviceProvidedType": "Sharepoint",
"drpContactList": [
{
"id": null,
"name": "Alex Lapage",
"timeStart": "05:00",
"timeEnd": "10:00",
"value": "alex.lapage@ctg.com",
"mediumType": "Email"
}
]
},
{
"id": 4,
"serviceWindow": "Manage services",
"status": "Active",
"customer": "DEXIA",
"serviceProvidedType": "System Admin",
"drpContactList": [
{
"id": null,
"name": "Rémi Hirtz",
"timeStart": "19:30",
"timeEnd": "23:00",
"value": "+352 595 945 154",
"mediumType": "Phone"
}
]
},
{
"id": 5,
"serviceWindow": "Enterprise holiday",
"status": "Active",
"customer": "POST",
"serviceProvidedType": "Hands & Eyes",
"drpContactList": [
{
"id": null,
"name": "Thomas Jacobs",
"timeStart": "13:00",
"timeEnd": "18:30",
"value": "thomas.jacbos@ctg.com",
"mediumType": "Email"
}
]
},
{
"id": 6,
"serviceWindow": "24/7",
"status": "Active",
"customer": "BGL",
"serviceProvidedType": "IT Outsourcing",
"drpContactList": [
{
"id": null,
"name": "Adrien Lafonte",
"timeStart": "05:45",
"timeEnd": "10:30",
"value": "+352 151 615 842",
"mediumType": "SMS"
}
]
}
]
所以在我的主要对象中有一个对象数组。如何显示第二个数组的信息？我尝试了一些技巧，但我从来没有找到一个好方法。这是我的HTML和Typescript：
<table class="table table-hover table-condensed">
<th style="width:150px" align="center">Customer</th>
<th style="width:150px" align="center">Service provided</th>
<th style="width:150px" align="center">Service window</th>
<th style="width:150px" align="center">DRP contact name</th>
<th style="width:150px" align="center">Time Start</th>
<th style="width:150px" align="center">Time End</th>
<th style="width:150px" align="center">Medium</th>
<th style="width:150px" align="center">DRP contact address</th>
<th style="width:150px" align="center">Status</th>
<tr *ngFor="#drp of drps"
[class.selected]="drp === selectedDrp"
(click)="gotoEdit(drp)">
<td style="width:150px" align="center">{{drp.customer}}</td>
<td style="width:150px" align="center">{{drp.serviceProvidedType}}</td>
<td style="width:150px" align="center">{{drp.serviceWindow}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].name}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].timeStart}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].timeEnd}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].mediumType}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].value}}</td>
<td style="width:150px" align="center">{{drp.status}}</td>
</tr>
</table>
如您所见，目前我只显示数组中的第一个对象。我把所有东西都放在一行中，或者我可以在数组中创建为对象的行。
这是一切背后的Typescript：
export class ListDrpsComponent extends BaseComponent implements OnInit {
drps:Drp[];
constructor(private _drpService:DrpService,
private messageService:MessageToUserService,
private _router:Router) {
super(_router, messageService);
}
onAddDrp() {
let link = ['AddDrp'];
this._router.navigate(link);
}
getDrps() {
this._drpService.getDrps().subscribe(
data => {
this.onNext(data)
},
(data)=> this.onError(data),
() => null
);
}
onNext(data:Response) {
super.onNext(data);
this.drps = <Drp[]> data.json();
console.log(this.drps);
}
ngOnInit() {
this.getDrps();
}
onError(data:Response) {
super.onError(data);
}
gotoEdit(drp:Drp) {
let link = ['EditDrp', {id: drp.id}];
this._router.navigate(link);
}
}
我很抱歉代码的介绍，我是新来的！如果您需要更多详细信息，请告诉我，我会尽力回应您的需求。对不起我的英语，它不是我的母语，我还在学习。
亲切，
弗洛里安
编辑：这是一张表格的图片。如果可能的话，我希望每个信息都有一行（所以我应该重复第一个对象信息的次数与第二个数组中的对象一样多次）
答案 0 :(得分：0)
无需修改模型（plnkr）：
<ng-template ngFor let-drp [ngForOf]="drps">
<tr *ngFor="let drpCt of drp.drpContactList"
[class.selected]="drp === selectedDrp"
(click)="gotoEdit(drp)">
<td style="width:150px" align="center">{{drp.customer}}</td>
<td style="width:150px" align="center">{{drp.serviceProvidedType}}</td>
<td style="width:150px" align="center">{{drp.serviceWindow}}</td>
<td style="width:150px" align="center">{{drpCt.name}}</td>
<td style="width:150px" align="center">{{drpCt.timeStart}}</td>
<td style="width:150px" align="center">{{drpCt.timeEnd}}</td>
<td style="width:150px" align="center">{{drpCt.mediumType}}</td>
<td style="width:150px" align="center">{{drpCt.value}}</td>
<td style="width:150px" align="center">{{drp.status}}</td>
</tr>
</ng-template>