Fehleranzeige in * ngfor json Array-Objekt

Question

wenn json Array-Objekt aus der Ruhe api holen und versuchen, ngfor

mit dem Grunde fehlgeschlagen angezeigt in

Fehler

AUSNAHME: Kann keine unterscheiden stützendes Objekt ‚[object Object finden ] 'vom Typ' Objekt '. NgFor unterstützt nur die Bindung an Iterables wie Arrays. in [Indizes in HomeComponent @ 5: 37]

-Code

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 Daten

[ 
    { 
    "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

denke ich, dass der Wert, den Sie in der indexes Eigenschaft kein Array, sondern ein Objekt .

würde ich mehrere Gründe dafür sehen:

• Sie erhalten die Antwort statt der Nutzlast aus dem getIndexes Methode. In diesem Fall könnten Sie den map Operator in diesem Verfahren verwenden:

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

• Die empfangene Nutzlast auf ein Array, aber einige seiner Eigenschaften nicht entspricht. In diesem Fall müssen Sie diese Eigenschaft in die Eigenschaft indexes festlegen.

Wenn Sie über die Eigenschaften eines Objekts zu durchlaufen wollen, müssen Sie wie folgt einen benutzerdefinierten Filter implementieren:

@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; 
    } 
} 

und es so verwenden:

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

See diese Frage:

• How to display json object using *ngFor

Answer 2

Ich hatte das gleiche Problem und meine Lösung war ohne Pipes. Ich habe keine Variable in der Vorlage verwendet, die Observer zurückgibt, eine Zwischenvariable erstellt und ihr ein Ergebnis zugewiesen habe. Zum Beispiel werden wir Strom in this.sub speichern, aber Ergebnis wird auf this.indexes auf Erfolg Rückruf speichern und wird diese Variable in der HTML-Vorlage verwenden.

@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

Sie sollten dies versuchen:

In html:

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

in .ts-Datei:

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

Sie wollen nicht, Rohre verwenden, bei der Arbeit mit Observablen. Dieser Fehler ist sehr allgemein und der beste Weg ist, in eine console.log() zu werfen und zu sehen, wo Sie falsch laufen, da es zahlreiche Dinge sein könnte.

Mein Problem war mein Array war innerhalb des Objekts, und ich habe versucht, über das Objekt zu schleifen. Andere Probleme könnten das Mapping oder ngFor beinhalten. Meine Konsole Ausgabe wird in etwa wie folgt aussehen:

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); 

Also das Update Ich brauchte etwas, wie das war:

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); 

Das war, weil das Feld innerhalb des Objekt verschachtelt wurde, so dass ich gerade ein neues Objekt und Zugriff auf das Array durch Abrufen seiner Eigenschaft.