Anzeige Abonnieren Sie die Daten in Eckige 4

Ich brauche Hilfe bei anzeigen der Ausgabe abonnieren von einer api im Winkel 4. Wie kann ich dies tun, denn ich schrieb von Daten.Daten.Daten, aber es sagt-Eigenschaft Daten nicht auf den Typ object. Wie würde ich die Ausgabe im browser? Hier mein code und die api-Bild unten

Anzeige Abonnieren Sie die Daten in Eckige 4

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {

  constructor(private newsService: NewsService) { }

  ngOnInit() {

    this.newsService.getNews()
      .subscribe(
        data => {
          alert("News Success");
          console.log(data);
        },
        error => {
          alert("ERROR");
        });
  }
}

InformationsquelleAutor Joseph | 2017-09-07

  1. 8

    erstellen Sie eine property der Komponente

    myData: any[] = [];

    und in Ihre Abonnenten-Funktion

    import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {

  constructor(private newsService: NewsService) { }

  ngOnInit() {

    this.newsService.getNews()
      .subscribe(
        (res: any) => {
          alert("News Success");
          this.myData = res.data; 
          //Where you find the array res.data or res.data.data
          console.log('res is ', res.data);
        },
        error => {
          alert("ERROR");
        });
      }
    }

    und in Ihrer Vorlage

    1) option zum anzeigen von JSON -

    <pre>{{myData | json}}</pre>

    2) option, um eine Schleife, wenn man das array

    <div *ngFor="let d of myData">
    {{d}}
</div>
    Fehler: Template-parsing-Fehler: Can ' T bind to 'ngForOf' da ist es nicht eine bekannte Eigenschaft von 'div'. (" <div [FEHLER ->]*ngFor="lass d myData"> {{d}} </div>
    schauen Sie diesem Beitrag hinzufügen-Browser modulse oder gemeinsames Modul in Ihrem Modul stackoverflow.com/questions/40331549/...
    auch die Daten zu prüfen versuchen Sie die option " Vorlage 1 <pre>{{myData | json}}</pre>

    InformationsquelleAutor Piyush Patel

  2. 1

    Ihre Daten array-Typ,

    Erstellen Sie eine variable vom Typ any

    myData : any;

    zuzuordnen und die Daten zu myData,

    this.newsService
    .getNews()
    .subscribe(
        data => {
           this.myData = data.data;
        },
        error => {
          alert("ERROR");
        }
    );

    können Sie ngFor zur Iteration über Arrays und anzeigen in der HTML -

    <li *ngFor="let item of myData">
     {{item}}
</li>
    ich denke, es this.myData = data.data;
    ja korrigiert
    Nicht erfasste (Versprechen): Fehler: Template-parsing-Fehler: Can ' T bind to 'ngForOf' da ist es nicht eine bekannte Eigenschaft von 'li'
    Noch auf die Daten.Daten, Eigenschaft data nicht vorhanden ist, auf dem Typ object

    InformationsquelleAutor Sajeetharan

  3. 1

    Müssen Sie es so machen 

    ngOnInit() {
 this.newsService.getNews()
  .subscribe(
    data => {
      data = data.json();
      console.log(data.data);
    },
    error => {
      alert("ERROR");
    });

    }

    den data.json() Teil ist wichtig, es konvertiert die Antwort in den richtigen json-so können Zugriff auf seine Daten.
    Jetzt können Sie ordnen Sie es auf die Instanz-variable wie diese

    this.myArrayData = data.data

    in Ihrem subscribe() Methode
    Dann in deinem template 

    <div *ngFor="let data of myArrayData">
  <!-- do whatever with the data properties -->
</div>
    HttpClient ist die neue http. Also ich brauche zum schreiben von Daten.json(). Es ist standardmäßig ein json. Mein Fehler ist jetzt auf der html. Fehler: Template-parsing-Fehler: Can ' T bind to 'ngForOf' da ist es nicht eine bekannte Eigenschaft von 'div'. (" <div [FEHLER ->]*ngFor="lass d myData"> {{d}} </div>
    haben Sie versucht, die Ausgabe, die es in deinem template in der json-pipe wie diese
    {{myData | json}}
    Haben Sie importiert die BrowserModule der Importe[] Ihre NgModule (app.- Modul.ts)?
    Es gibt einen neuen Fehler. Fehler: kann Nicht finden, unterscheiden sich die Unterstützung Objekt '[object]' des Typs 'Objekt'. NgFor unterstützt nur verbindlich, Iterables wie Arrays

    InformationsquelleAutor Asim Hashmi

Schreibe einen Kommentar