2016-05-25 8 views
7

मैं Ngfor में json वस्तु यात्रा में समस्या हो रही में Ngfor पर एक json वस्तु, वहाँ मेरे टेम्पलेट हैयात्रा कोणीय 2

<h1>Hey</h1> 
    <div>{{ people| json}}</div> 
    <h1>***************************</h1> 
    <ul> 
    <li *ngFor="#person of people"> 
     {{ 
      person.label 
     }} 
    </li> 
</ul> 

लोगों json वस्तु है कि मैं

और समाप्त करने के लिए, यहाँ एक हिस्सा है: | 'm पुनरावृत्ति करने के लिए, मैं के rhe परिणाम हो रही है कोशिश कर (लोगों json) और सूची नहीं मिल रहा है, यहाँ एक स्क्रीनशॉट है json फ़ाइल की:

{ 
"actionList": { 
"count": 35, 
"list": [ 
    { 
    "Action": { 
     "label": "A1", 
     "HTTPMethod": "POST", 
     "actionType": "indexation", 
     "status": "active", 
     "description": "Ajout d'une transcription dans le lac de données", 
     "resourcePattern": "transcriptions/", 
     "parameters": [ 
      { 
       "Parameter": { 
        "label": "", 
        "description": "Flux JSON à indexer", 
        "identifier": "2", 
        "parameterType": "body", 
        "dataType": "json", 
        "requestType": "Action", 
        "processParameter": { 
         "label": "", 
         "description": "Flux JSON à indexer", 
         "identifier": "4", 
         "parameterType": "body", 
         "dataType": "json", 
         "requestType": "Process" 
        } 
       } 
      }, 

कृपया मदद करने के लिए मुझे

उत्तर

12

आपका people वस्तु एक सरणी तो आप इस पर बॉक्स से बाहर पुनरावृति कर सकते हैं नहीं है संकोच न करें।

  • आप एक उप संपत्ति पर पुनरावृति करना चाहते हैं:

    दो विकल्प नहीं है। उदाहरण के लिए:

    <ul> 
        <li *ngFor="#person of people?.actionList?.list"> 
        {{ 
         person.label 
        }} 
        </li> 
    </ul> 
    
  • आप अपनी ऑब्जेक्ट की चाबियों पर फिर से चलना चाहते हैं।

    @Pipe({name: 'keys'}) 
    export class KeysPipe implements PipeTransform { 
        transform(value, args:string[]) : any { 
        if (!value) { 
         return value; 
        } 
    
        let keys = []; 
        for (let key in value) { 
         keys.push({key: key, value: value[key]}); 
        } 
        return keys; 
        } 
    } 
    

    और इसे इस तरह का उपयोग करें::

    <ul> 
        <li *ngFor="#person of people | keys"> 
        {{ 
         person.value.xx 
        }} 
        </li> 
    </ul> 
    

    अधिक जानकारी के लिए इस उत्तर देखें:

  • इस मामले में, आप एक कस्टम पाइप लागू करने की आवश्यकता
+1

आपको बहुत धन्यवाद, मैंने आपके टेम्पलेट में उल्लिखित पाइप को जोड़ा है, मैंने इसे इस तरह से कॉल किया है और अभी भी कुछ भी नहीं मिला है:

  • ​​ {{ msg.value.Action.label }}
  • // उदाहरण प्रत्येक कार्य नोड – Anna

    +0

    के तहत सभी लेबल हो रही जब मैं इस तरह यह कोशिश कर रहा हूँ के लिए:

  • {{ obj.value.list [0] .क्शन। लेबल }}
  • मुझे लेबल मिल रहा है: ए 120, और पहले लेबल ए 1 नहीं, और मुझे केवल एक तत्व नहीं मिल रहा है एक सूची, क्या यह सामान्य है? – Anna

    +0

    मैंने इस तरह इंडेक्स को जोड़ने की कोशिश की है, यह काम नहीं किया:

  • {{ obj.value.list [i] .क्शन। लेबल }}
  • // मैं सूची के अंदर इंडेक्स मूल्य कैसे पास कर सकता हूं ?? – Anna