2016-07-06 8 views
39

भिन्न करने की कोशिश करने में त्रुटि कोई भी मार्गदर्शन कर सकता है? मुझे त्रुटि मिल रही है, पता नहीं क्यों ?? कुछ भाड़ा चर के साथ गलत html में ऐसा लगता है कि'[ऑब्जेक्ट ऑब्जेक्ट]'

एप्लिकेशन/करने में त्रुटि freightList.component.html: 13: 8 diff करने की कोशिश कर '[वस्तु वस्तु]'

नीचे त्रुटि कोड

freight.service.ts 
======================= 

    getFreight(): Promise<Freight[]> { 
     return this.http.get(this.freightUrl) 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body || { }; 
    } 

freightList.component.ts 
======================== 
    getFreight() { 
     this.freightService 
      .getFreight() 
      .then(freight => this.freight = freight) 
      .catch(error => this.error = error); // TODO: Display error message 
    } 

freightList.component.html 
============================ 

     <tr *ngFor="let frght of freight"> 
     <td>{{frght.grp}} - {{frght.grpname}}</td> 
     <td>{{frght.subgrp}} - {{frght.subgrpname}}</td> 
     <td>{{frght.prodno}} - {{frght.prodname}}</td> 
     <td>{{frght.percent}}</td> 
     <td>{{frght.effective_date}}</td> 
     <td><button (click)="deleteFreight(frght, $event)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove</button></td> 
     <td><button (click)="editFreight(frght)" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit"></span> Edit</button></td> 
     </tr> 

Response body 
================== 

    [{ 
     "effective_date": "01/01/2016", 
     "grp": "01", 
     "grpname": "STOPS/FLEX HOSES/COVER PLATES", 
     "id": "1", 
     "percent": "10", 
     "prodname": "DWV PVC PIPE 100MM X 6MTR SN6 SWJ", 
     "prodno": "1400200", 
     "subgrp": "02", 
     "subgrpname": "DWV PIPE - UP TO 150MM" 
    }, { 
     "effective_date": "01/02/2016", 
     "grp": "01", 
     "grpname": "STOPS/FLEX HOSES/COVER PLATES", 
     "id": "2", 
     "percent": "11", 
     "prodname": "PVC PIPE 100MM X 6MTR SWJ SN10", 
     "prodno": "1400201", 
     "subgrp": "03", 
     "subgrpname": "DIMPLEX BATHROOM ACCESSORIES" 
    }] 
है

उत्तर

69

आपका निकालने वाला डेटा (और संभवतः आपका HTTP एपीआई) एक ऑब्जेक्ट लौटा रहा है {} - ngFor को एक सरणी [] को फिर से चालू करने की आवश्यकता है।

अपनी सेवा/एपीआई को सरणी बनाने के लिए बदलें, या ऑब्जेक्ट को अपने घटक में बदलें।

0

जब मैंने वेबएपी बदल दिया तो मैं इस मुद्दे में भाग गया था, मैं पिछले IEnumerable<object> के बजाय Task<IActionResult> वापस करने के लिए बुला रहा था। प्रतिक्रिया किसी वस्तु में लपेटा नहीं है।

private extractData(res: Response) { 
    let body = res.json(); 
    return body.result || body || { }; 
} 
0

सबसे अच्छा तरीका है NgForm वस्तु लेने के लिए और अपने reset() समारोह कॉल करने के लिए है: मैं करने के लिए मेरे extractData विधि बदलना पड़ा।

उदाहरण:

एचटीएमएल फ़ाइल

<form #exampleform='ngForm'> 

</form> 

ts फ़ाइल

@ViewChild('exampleform') exampleform :NgForm; 

this.exampleform.reset(); // resets the form