我正在開發一個 Angular 應用程式，它需要從 Wordpress REST API 獲取帖子及其各自的標簽名稱。使用 APIGET需要將兩個請求發送到服務器。第一個請求正在發送到/wp/v2/posts. 來自服務器的回應如下所示：
帖子摘錄要求：
[
{
"id": 9,
"title": {
"rendered": "Hello World! 3"
},
"tags": [
2,
3,
4
]
},
{
"id": 7,
"title": {
"rendered": "Hello World! 2"
},
"tags": [
2,
3
]
}
...
]
tags陣列中的數字不是實際的人類可讀標簽名稱，它們只是標簽的標識。從服務器收到第一個回應后，我們需要向服務器發送另一個GET請求，/wp/v2/tags?include=2,3,4同時為其提供標簽識別符號。我們不需要資料庫中可用的每個標簽，只需要在對第一個請求的回應中參考的標簽。換句話說，第二個請求取決于第一個請求的結果。來自服務器的第二個請求的回應如下所示：
標簽請求摘錄：
[
{
"id": 2,
"name": "test"
},
{
"id": 3,
"name": "test2"
},
{
"id": 4,
"name": "test3"
}
]
經過研究，我發現在 Angular 中嵌套Observable.subscribe()方法不是解決這個問題的推薦方法。RxJS 的switchMap運算子似乎是要走的路。我的要求如下：
- 電話帖
- 從帖子中獲取 ID
- 帶有 ID 的呼叫標簽
- 將標簽與帖子合并并回傳（以便帖子陣列有一個名為 的鍵
tag_names）
然后.subscribe()到整個流程并獲得帖子和標簽的組合物件，然后可以在 Angular 模板檔案中使用NgForOf. 這個網站上的一個人給了我一段代碼。他的方法是使用Lodash根據物件的 id 屬性組合兩個陣列。然而，他的方法并沒有做它應該做的事情，因為在模板中我無法訪問真實的標簽名稱以從mergedArrays.
請注意，我不要求您使用 Lodash 將結果合并到您的答案中。這只是在我的代碼中嘗試過的。任何其他合并結果的方法也將符合條件。
uj5u.com熱心網友回復：
vanilla JS 的方法是使用 map 和 find 將 ID 替換為相應的標簽。
像這樣：
.subscribe(({ questions, tags }) => {
const mergedArrays = questions.map((q) => {
return {
...q,
tag_names: q.tags
.map((tagId) => tags.find((x) => x.id == tagId).name)
.filter((exists) => !!exists),
};
});
this.mergedArrays = mergedArrays;
});
這是您的示例，但分叉到我的解決方案中：https : //stackblitz.com/edit/angular-ivy-vxcxzw? file = src/app/ app.component.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/403700.html
標籤：
上一篇：忽略Angular中的匯入
下一篇：Angularhttp模擬