त्रुटि प्रदर्शन

Question

जब बाकी एपीआई से json सरणी वस्तु प्राप्त करने में कठिनाई और में प्रदर्शित करने के लिए कारण के साथ विफल ngfor कोशिश कर

त्रुटि

अपवाद: नहीं एक वस्तु का समर्थन 'अलग मिल सकता है [वस्तु वस्तु ] 'प्रकार' ऑब्जेक्ट '। NgFor केवल arrays जैसे Iterables के लिए बाध्यकारी का समर्थन करता है। [HomeComponent @ 5 में अनुक्रमित: 37] में

कोड

import {Component} from 'angular2/core'; 
import {HomeService} from './home.services'; 
import {Index} from './index'; 

@Component({ 
    selector: 'home-app', 
    providers: [HomeService], 

    template: ` 
     <section class="left_side"> 
      <article> 
       <div class="div_home"> 
        <div class="div_homeIndxPartition"> 
         <div class="div_IndxPartition" *ngFor="#indObj of indexes"> 
          <table width="500px" class="idx_cons_table_det"> 
           <tr> 
            <th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th> 
            <th align="center">Value</th> 
            <th align="center">Change</th> 
            <th align="center">%</th> 
           </tr> 
           <tr> 
            <td align="center" colspan="1"></td> 
            <td align="center">{{indObj.value}}</td> 
            <td align="center">{{indObj.change}}</td> 
            <td align="center">{{indObj.percent}}%</td> 
           </tr> 
          </table> 
          <br/> 
          <table width="500px" class="idx_cons_table"> 
           <tr> 
            <th align="center">High</th> 
            <th align="center">Low</th> 
            <th align="center">Open</th> 
            <th align="center">Close</th> 
            <th align="center">52 Week High</th> 
            <th align="center">52 Week Low</th>        
           </tr> 
           <tr> 
            <td align="center">{{indObj.high}}</td> 
            <td align="center">{{indObj.low}}</td> 
            <td align="center">{{indObj.open}}%</td> 
            <td align="center">{{indObj.close}}</td> 
            <td align="center">{{indObj.yearHigh}}</td> 
            <td align="center">{{indObj.yearLow}}%</td> 
           </tr> 
          </table>       
         </div>      
        </div> 
       </div> 
      </article> 
     </section> 
    ` 

}) 
export class HomeComponent { 
    public indexes:Array<Index>=[]; 
    public error; 

constructor(private _service: HomeService){ 
    this.indexes = _service.getIndexes().subscribe(
      data => this.indexes = JSON.parse(data), 
      error => alert(" Error is : " + error), 
      ()=> console.log("finished") 
     ); 
    console.log(this.indexes); 
} 
} 

JSON डेटा

[ 
    { 
    "id": 1, 
    "name": "FTSE 100", 
    "ticker": "UKX", 
    "value": 69875.23, 
    "change": 100, 
    "percent": 2.3, 
    "high": 69875.23, 
    "low": 69700.89, 
    "yearHigh": 699999.23, 
    "yearLow": 680005.23, 
    "open": 69600.54, 
    "close": 699000.97, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 2, 
    "name": "FTSE 250", 
    "ticker": "MCX", 
    "value": 465820.85, 
    "change": 100, 
    "percent": 2.3, 
    "high": 465880.12, 
    "low": 465810.74, 
    "yearHigh": 478990.34, 
    "yearLow": 465320.23, 
    "open": 69600.54, 
    "close": 699000.97, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 3, 
    "name": "FTSE All-Share", 
    "ticker": "ASX", 
    "value": 236549.23, 
    "change": 100, 
    "percent": 2.3, 
    "high": 236949.23, 
    "low": 236149, 
    "yearHigh": 246949.21, 
    "yearLow": 235549.29, 
    "open": 236519.23, 
    "close": 236649.23, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 4, 
    "name": "Euro Stoxx 50", 
    "ticker": "STOXX50E", 
    "value": 123469.87, 
    "change": 100, 
    "percent": 2.3, 
    "high": 123499.87, 
    "low": 123439.87, 
    "yearHigh": 123499.87, 
    "yearLow": 123169.87, 
    "open": 123465.87, 
    "close": 123459.87, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 5, 
    "name": "S&P 500 ", 
    "ticker": "S500", 
    "value": 358976.36, 
    "change": 100, 
    "percent": 2.3, 
    "high": 358986.36, 
    "low": 358946.36, 
    "yearHigh": 359976.36, 
    "yearLow": 357976.36, 
    "open": 358970.36, 
    "close": 358996.36, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 6, 
    "name": "Dow Jones I.A.", 
    "ticker": "INDU", 
    "value": 456789.36, 
    "change": 100, 
    "percent": 2.3, 
    "high": 456799.36, 
    "low": 456779.36, 
    "yearHigh": 456889.36, 
    "yearLow": 456689.36, 
    "open": 456729.36, 
    "close": 456779.36, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 7, 
    "name": "GOLD", 
    "ticker": "", 
    "value": 500, 
    "change": 100, 
    "percent": 2.3, 
    "high": 700, 
    "low": 300, 
    "yearHigh": 1500, 
    "yearLow": 350, 
    "open": 450, 
    "close": 470, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    }, 
    { 
    "id": 8, 
    "name": "Brent Crude", 
    "ticker": "", 
    "value": 112, 
    "change": 100, 
    "percent": 2.3, 
    "high": 115, 
    "low": 107, 
    "yearHigh": 200, 
    "yearLow": 72, 
    "open": 110, 
    "close": 115, 
    "constituents": null, 
    "runDate": "21/04/2015" 
    } 
] 

Answer 1

मुझे लगता है कि आप indexes संपत्ति में सेट मूल्य एक सरणी लेकिन एक वस्तु नहीं है ।

मैं इस के लिए कई कारण देखना होगा:

• आप प्रतिक्रिया के बजाय getIndexes विधि से पेलोड प्राप्त करते हैं। इस मामले में, आप इस विधि में map ऑपरेटर इस्तेमाल कर सकते हैं:

  getIndexes() { 
      return this.http.get(...).map(res => res.json()); 
  } 
  

• प्राप्त पेलोड एक सरणी लेकिन उसके गुण से कुछ के अनुरूप नहीं है। इस मामले में, आपको इस संपत्ति को indexes संपत्ति में सेट करने की आवश्यकता है।

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

  और इस तरह इसका इस्तेमाल:

  <div class="div_IndxPartition" *ngFor="#indObj of indexes | keyValues"> 
      (...) 
  </div> 
  

  देखें

आप एक वस्तु के गुणों से अधिक पुनरावृति करना चाहते हैं, तो आप इस तरह कस्टम फ़िल्टर लागू करने की आवश्यकता यह प्रश्न:

• How to display json object using *ngFor

Answer 2

मुझे एक ही समस्या थी और मेरा समाधान पाइप्स के बिना था। मैंने टेम्पलेट में वेरिएबल का उपयोग नहीं किया जो ऑब्जर्वर लौटाता है, इंटरमीडिएट वैरिएबल बनाता है और इसके परिणाम देता है। उदाहरण के लिए, हम स्ट्रीम को this.sub पर सहेज लेंगे लेकिन परिणाम सफलता कॉलबैक पर this.indexes पर सहेजा जाएगा और HTML टेम्पलेट में इस चर का उपयोग करेगा।

@Component({ 
    template: ` 
<ul> 
    <li *ngFor="let index of indexs"> 
    {{ index }} 
    </li> 
</ul> 
` 
}) 
export class HomeComponent { 
    privat sub; 
    public indexes:Array<Index>=[]; 
    public error; 

    constructor(private _service: HomeService) { 
    this.sub = this._service.getIndexes().subscribe(
     data => this.indexes = JSON.parse(data), 
     error => alert(" Error is : " + error), 
     () => console.log("finished") 
    ); 

    } 
} 

Answer 3

आप इस प्रयास करना चाहिए:

एचटीएमएल में:

<div *ngFor="let subsciption of subscriptions;"> 
        <div class="col-md-6"> 
         <h5 class="widget-title">{{subsciption.name}}</h5> 
        </div> 
</div> 

.ts फ़ाइल में:

export class SubscriptionComponent implements OnInit { 
     private subscriptions: any =[]; 
     // private subscriptions: any ={}; // here dont use {} 
    . 
    . 
    . 
    . 
    . 

     getAllSubscriptions(queryString) { 
      this._http.get(`${environment.base_url}/subscriptions` + queryString) 
       .subscribe((response: Response) => { 
        this.subscriptions = response.json(); 
       }, 

       (error: Response) => { 
        console.log("Login error"); 
       }); 
     } 
     this.getAllSubscriptions(query); 

    } 

Answer 4

आप पाइप का उपयोग नहीं करना चाहते हैं Observables के साथ काम करते समय। यह त्रुटि बहुत सामान्य है और कंसोल.लॉग() में फेंकने का सबसे अच्छा तरीका है और देखें कि आप कहां गलत हो रहे हैं क्योंकि यह कई चीजें हो सकती है।

मेरी समस्या मेरा ऐरे ऑब्जेक्ट के अंदर था, और मैं ऑब्जेक्ट पर लूप करने की कोशिश कर रहा था। अन्य समस्याओं में मानचित्रण या ngFor शामिल हो सकता है। मेरे सांत्वना उत्पादन कुछ इस तरह दिखेगा:

this.indexes = _service.getIndexes() 
     .subscribe(
      data => { 
       this.indexes = JSON.parse(data); 
       console.log(indexes); 
      }, 
      error => alert(" Error is : " + error), 
       ()=> console.log("finished") 
     ); 
    console.log(this.indexes); 

तो ठीक मैं जरूरत कुछ इस तरह था:

this.indexes = _service.getIndexes() 
      .subscribe(
       data => { 
        this.myNewObject = JSON.parse(data); 
        this.indexes = this.myNewObject.indexes; 
       }, 
       error => alert(" Error is : " + error), 
        ()=> console.log("finished") 
      ); 
     console.log(this.indexes); 

ऐसा इसलिए हुआ क्योंकि सरणी वस्तु के अंदर नेस्टेड किया गया था, तो मैं बस एक नया बनाया ऑब्जेक्ट और अपनी संपत्ति प्राप्त करके सरणी का उपयोग किया।