所以我有objectA和objectB
objectA {
0: {name: 'M', date: '2021-10-24'}
1: {name: 'T', date: '2021-10-25'}
2: {name: 'W', date: '2021-10-26'}
3: {name: 'T', date: '2021-10-27'}
4: {name: 'F', date: '2021-10-28'}
5: {name: 'S', date: '2021-10-29'}
6: {name: 'S', date: '2021-10-30'}
}
objectB {
2021-10-29: [{…}]
2021-10-30: [{…}, {…}]
}
objectA持有本周的所有天數，objectB持有本周的所有約會（構建約會應用程式），因此objectB可以每天都有一個約會，以約會的日期為鍵，也可以只有一個，兩個甚至 0 個日期鍵，取決于是否有約會。在上面的例子中，29 號只有一個約會，30 號有兩個約會。
我的問題是，我想通過迭代物件B在HTML從得到鑰匙（日期字串）（得到一些約會資料）物件A。我收到此錯誤并且迭代停止，因為我嘗試訪問的密鑰不存在。
錯誤：
ERROR TypeError: Cannot read properties of undefined (reading '2021-10-24')
這是我的 HTML：
<tbody>
<tr>
<td *ngFor="let day of objectA">
<div *ngFor="let app in objectB[day.date]">
<span *ngIf="app">{{ app.startTime | date : 'HH:mm' }}</span>
</div>
</td>
</tr>
</tbody>
所以我想我的問題是如何在不知道objectB 的所有鍵的情況下迭代它，或者如何讓 for 回圈忽略 undefined 并繼續迭代。
謝謝！
uj5u.com熱心網友回復：
解決方案1
您需要KeyValuePipe迭代物件以獲取鍵和值。
<td *ngFor="let kv of objectA | keyvalue;">
<div *ngFor="let app of objectB[kv.value.date]">
<span *ngIf="app">{{ app.startTime | date: 'HH:mm' }}</span>
</div>
</td>
StackBlitz 上的示例解決方案 1
解決方案2
轉換objectA為陣列Object.keys()。
aList = Object.keys(this.objectA).map((x: any) => this.objectA[x]);
<td *ngFor="let day of aList;">
<div *ngFor="let app of objectB[day.date]">
<span *ngIf="app">{{ app.startTime | date: 'HH:mm' }}</span>
</div>
</td>
StackBlitz 上的示例解決方案 2
uj5u.com熱心網友回復：
<tbody>
<tr>
<td *ngFor="let day of objectA">
<ng-container *ngIf="objectB[day.date]">
<div *ngFor="let app in objectB[day.date]">
<span *ngIf="app">{{ app.startTime | date : 'HH:mm' }}</span>
</div>
</ng-container>
</td>
</tr>
</tbody>
只需添加一個 if 條件并檢查該鍵是否存在于 ObjectB 中，然后回圈認為它
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343781.html
下一篇：授權標頭角度http錯誤