【发布时间】：2017-08-24 01:23:06
【问题描述】：
我目前正在使用 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);
}
}对不起，我是新来的代码！如果您需要更多详细信息，请告诉我，我会尽力回应您的需求。对不起，我的英语不是我的母语，我还在学习。
谨此
弗洛里安
编辑：这是一张桌子的样子。如果可能的话，我希望每个信息有一行（所以我应该重复第一个对象信息的次数与第二个数组中的对象一样多）
【问题讨论】：
-
为什么不为子数组实现一个额外的嵌套ngFor？
-
这里有什么问题？怎么做或者它应该是什么样子？您没有提供您希望如何显示您的表格的外观。我做了这个：plnkr.co/edit/MUr9qFQrWDtNJTXkMPcp?p=preview 但如果它回答了你的问题，我现在不知道
-
（PS：“Jean Bon”听起来是个好名字）
-
因为我不知道我该怎么做。我想过专门为列表做一个模型？
-
@YounesM 这就是我想要的样子！我会想办法不重复列的标题。
标签： html arrays angular typescript