如何基于索引访问Angular 4中的数组数组中的元素？
我想只在Angular 4的表格中迭代阵列的第一个元素（对于电视广告1而言，从2017年2月10日到2017年1月29日为止的几周内）。但是我面临着挑战，因为它是遍历表中的所有元素（对于所有电视广告1,2,3,4）。如何基于索引访问Angular 4中的数组数组中的元素？
请在下面找到我的代码： JSON：
public calendarTable = [
{ name: "TV AD1",
weeks: [
{ period: "2/10/2017", price: "400" },
{ period: "9/10/2017", price: "800" },
{ period: "16/10/2017", price: "200" },
{ period: "23/10/2017", price: "500" },
{ period: "30/10/2017", price: "600" },
{ period: "6/11/2017", price: "800" },
{ period: "13/11/2017", price: "700" },
{ period: "20/11/2017", price: "800" },
{ period: "27/11/2017", price: "900" },
{ period: "4/12/2017", price: "400" },
{ period: "11/12/2017", price: "800" },
{ period: "18/12/2017", price: "200" },
{ period: "25/12/2017", price: "500" },
{ period: "1/1/2018", price: "600" },
{ period: "8/1/2018", price: "800" },
{ period: "15/1/2018", price: "700" },
{ period: "22/1/2018", price: "800" },
{ period: "29/1/2018", price: "900" }
]
},
{ name: "TV AD2",
weeks: [
{ period: "2/10/2017", price: "500" },
{ period: "9/10/2017", price: "600" },
{ period: "16/10/2017", price: "700" },
{ period: "23/10/2017", price: "800" },
{ period: "30/10/2017", price: "900" },
{ period: "6/10/2017", price: "100" },
{ period: "13/10/2017", price: "200" },
{ period: "20/10/2017", price: "300" },
{ period: "27/10/2017", price: "400" },
{ period: "4/12/2017", price: "400" },
{ period: "11/12/2017", price: "800" },
{ period: "18/12/2017", price: "200" },
{ period: "25/12/2017", price: "500" },
{ period: "1/1/2018", price: "600" },
{ period: "8/1/2018", price: "800" },
{ period: "15/1/2018", price: "700" },
{ period: "22/1/2018", price: "800" },
{ period: "29/1/2018", price: "900" }
]
},
{ name: "TV AD3",
weeks: [
{ period: "2/10/2017", price: "500" },
{ period: "9/10/2017", price: "600" },
{ period: "16/10/2017", price: "700" },
{ period: "23/10/2017", price: "800" },
{ period: "30/10/2017", price: "900" },
{ period: "6/10/2017", price: "100" },
{ period: "13/10/2017", price: "200" },
{ period: "20/10/2017", price: "300" },
{ period: "27/10/2017", price: "400" },
{ period: "4/12/2017", price: "400" },
{ period: "11/12/2017", price: "800" },
{ period: "18/12/2017", price: "200" },
{ period: "25/12/2017", price: "500" },
{ period: "1/1/2018", price: "600" },
{ period: "8/1/2018", price: "800" },
{ period: "15/1/2018", price: "700" },
{ period: "22/1/2018", price: "800" },
{ period: "29/1/2018", price: "900" }
]
},
{ name: "TV AD4",
weeks: [
{ period: "2/10/2017", price: "500" },
{ period: "9/10/2017", price: "600" },
{ period: "16/10/2017", price: "700" },
{ period: "23/10/2017", price: "800" },
{ period: "30/10/2017", price: "900" },
{ period: "6/10/2017", price: "100" },
{ period: "13/10/2017", price: "200" },
{ period: "20/10/2017", price: "300" },
{ period: "27/10/2017", price: "400" },
{ period: "4/12/2017", price: "400" },
{ period: "11/12/2017", price: "800" },
{ period: "18/12/2017", price: "200" },
{ period: "25/12/2017", price: "500" },
{ period: "1/1/2018", price: "600" },
{ period: "8/1/2018", price: "800" },
{ period: "15/1/2018", price: "700" },
{ period: "22/1/2018", price: "800" },
{ period: "29/1/2018", price: "900" }
]
}
]
HTML：
<thead>
<tr class="black-muted-bg" *ngFor="let item of calendarTable" >
<th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th>
</tr>
</thead>
请帮助我在这方面
只需添加[0]您calenderTable ...看看下面的代码...
<thead>
<tr class="black-muted-bg" *ngFor="let item of calendarTable[0]" >
<th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th>
</tr>
</thead>
，或者你可以去这样的...
<thead>
<tr class="black-muted-bg" >
<th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th>
</tr>
</thead>
辉煌。谢谢你。 –
你也可以请建议如何添加分页到表。 –
确定...在此处查看http：//www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls ... –
提取阵列&循环之前保持在一个变量。因为calendarTable是一个对象数组calendarTable[0]会给第一个对象& calendarTable[0].weeks会给周键的值从该对象
var toLoop = calendarTable[0].weeks;
取数组中的第一项（calendarTable）并循环遍历数周。
<thead>
<tr class="black-muted-bg">
<th class="align-right" *ngFor="let data of calendarTable[0].weeks">
{{data.period}}
</th>
</tr>
</thead>
如果您需要动态地选择每个表的对象，你可以这样做：
在你服务：
private calendarTable = [
// this is the table you already have
];
getAdsNames(): string[] {
return Array.from(this.calendarTable, ad => ad.name);
}
getAd(adName: string): any {
return this.calendarTable.filter(ad: => ad.name === adName)[0];
}
在你组件：
availableAds: string[];
activeAd: any;
ngOnInit() {
this.availableAds = this.myService.getAdsNames();
// Loads the first ad from the list
this.activeAd = this.setActiveAd(this.availableAds[0]);
}
setActiveAd(adName: string) {
this.activeAd = this.myService.getAd(adName);
}
在您的模板：
<thead>
<tr class="black-muted-bg">
<th class="align-right" *ngFor="let week of activeAd.weeks">{{week.period}}</th>
</tr>
</thead>
<!-- Change between different ads -->
<select [(ngModel)]="selectedAd" (ngModelChange)="setActiveAd($event)">
<option *ngFor="let ad of availableAds" [ngValue]="ad">
{{ ad }}
</option>
</select>
如果您不需要动态更改广告，还是应该做一个service处理您data，只是要求值，当你需要它（例如在组件的init中 - 在ngOnInit方法中）并使其可用于模板。
P.S .:您应该避免使用any，因为我已经使用（为简化示例）并为您的广告创建了model。
干杯
直接使用第一个元素，然后重复周。 –