iT邦幫忙

0

有關Angular *ngFor/array問題

目前使用兩個表格引用同一個data list,第一個表(城市資訊)有顯示,第二個表(天氣資訊)則無

表格:
https://ithelp.ithome.com.tw/upload/images/20190104/201137041oHYh87L0h.png

JSON:
https://codebeautify.org/jsonviewer/cb28b09d

error:
https://ithelp.ithome.com.tw/upload/images/20190104/20113704JNFAQHblR3.png

(HomeComponent.html:59) 為
https://ithelp.ithome.com.tw/upload/images/20190104/20113704VdRJ17QFZ9.png

第一個*ngFor (可呈現 )
https://ithelp.ithome.com.tw/upload/images/20190104/20113704esuuW12ter.png

第二個*ngFor (無法呈現 )
https://ithelp.ithome.com.tw/upload/images/20190104/20113704Podnjs8Dw1.png

我也嘗試過將第一個ngFor的{{ item }}放到第二個ngFor上 是可行的
若只打出 {{ item.list_ }} 會出現 [object Object]
https://ithelp.ithome.com.tw/upload/images/20190104/20113704faAaH47nun.png
請問是我array的呈現方式出問題嗎 或是要分做兩個data list?

看更多先前的討論...收起先前的討論...
你有看過item.list是什麼內容嗎?這種輸出看起來有兩種可能,一個是list下層還有內容,另一個可能是這不是array而是object,若為object應該要改變呼叫方式,使用item[0]->欄位名稱。
jackson09 iT邦新手 5 級 ‧ 2019-01-04 14:07:14 檢舉
item.list內容如下:
JSON: https://codebeautify.org/jsonviewer/cb28b09d
jackson09 iT邦新手 5 級 ‧ 2019-01-04 14:09:50 檢舉
可以請問一下你說的'改變呼叫方式,使用item.list->欄位名稱'
是直接打欄位名稱的意思嗎?若原本是 item.list_.dt 改為 直接打 dt嗎?直接打dt它沒display
請看下方回答,說明較完整。

1 個回答

1
Aka程式狗
iT邦新手 5 級 ‧ 2019-01-04 15:51:43
最佳解答

幫你確認過囉,我這邊環境是php,所以是用php解析json,但可以確定的是list_底下還有內容,先是array再來是object,所以要用指向的方式呼叫變數,根據你的狀況先用array的方式再用object的方式,item[0]->dt就可以display。

看更多先前的回應...收起先前的回應...
jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:01:18 檢舉

感謝你的回答 但照做後他整個error/images/emoticon/emoticon02.gif
https://ithelp.ithome.com.tw/upload/images/20190104/20113704PtQHx6LcCy.png

試試看將item.list_跑迴圈呢?php而言會長這樣,嘗試轉換過去看看吧。

// 使用foreach
foreach ($item['list_'] as $list) {
    echo $list->db;
}

// 取得list_最大長度
$count = count($item['list_']);

// 使用for
for ($i = 0; $i < $count; $i++) {
    echo $item['list_'][$i]->dt;
}
jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:04:25 檢舉

您的意思是這樣嗎
https://ithelp.ithome.com.tw/upload/images/20190104/20113704Rb3WJv02iE.png
感謝你

若是用for的方式item.list_[0]這裡的數字要替換為迴圈次數,若是使用foreach則直接用變數指向,抱歉,你這個語言我沒有學過,解釋得不是很好。

jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:14:24 檢舉

抱歉我也不是很懂 也更不懂php /images/emoticon/emoticon02.gif
再次感謝您的回答

剛剛仔細看一下,item[0]->dt,這樣應該就沒問題了,不好意思。

*ngFor="let item of list.list_">
{{item[0]->dt}}
jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:24:48 檢舉

還是無法 T_T (抱歉浪費你寶貴的時間)
https://ithelp.ithome.com.tw/upload/images/20190104/20113704ns9j37j8Pn.png

可否輸出list.list_的其中一個item內容給我看呢?照你提供的json先使用array呼叫再用object應該沒錯啊QQ

[list_] => Array
        (
            [0] => stdClass Object
                (
                    [dt] => 1546516800
                 )
        )
jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:34:55 檢舉

'list_': [
{
'dt': 1546430400,
'temp': {
'day': 4,
'min': -5.23,
'max': 4,
'night': -5.23,
'eve': -0.13,
'morn': -1.36
},
'pressure': 1049.36,
'humidity': 0,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 3.37,
'deg': 2,
'clouds': 0
},

jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:35:50 檢舉

https://ithelp.ithome.com.tw/upload/images/20190104/201137049Ewj2dPSQB.png

這樣是否可行?

*ngFor="let item of list.list_">
{{item[0].dt}}
jackson09 iT邦新手 5 級 ‧ 2019-01-04 16:44:00 檢舉

這樣沒error 但不會display

jackson09 iT邦新手 5 級 ‧ 2019-01-09 11:20:55 檢舉

finally i found the ans !
https://ithelp.ithome.com.tw/upload/images/20190109/20113704sUphT3THTZ.png

感謝您 Aka城市狗

讚喔!

jackson09 iT邦新手 5 級 ‧ 2019-01-10 10:58:52 檢舉

嗨哥 其實你的方法也行的通 只是因為彼此不熟對方的語言 我自己又不熟angular 再次感謝您的幫忙

Solution 2:

https://ithelp.ithome.com.tw/upload/images/20190110/20113704kqW30bKMpU.png

原來呀~恭喜你更了解angular了。

我要發表回答

立即登入回答