Hello, I'm a beginner in angular 2, I'm developing an application using Angular 2 and PHP, but when I take the json values it gives error:
ERROR Error: Error trying to diff 'Grand Tour'. Only arrays and iterables are allowed and ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 23, nodeDef: Object, elDef: Object, elView: Object}.
This is the backend, it's very simple:
<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
header("Access-Control-Allow-Origin: *");
require 'vendor/autoload.php';
$app = new \Slim\App;
$app->get('/games', function (Request $request, Response $response){
$games = array();
$games = array(
"name" => "Grand Turismo",
"category" => "PS4",
"price" => "199.99",
"quantity" => "8",
"production" => "true",
"description" => "Eleito o melhor jogo de corrida."
);
return json_encode($games);
});
$app->run();
?>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PopupModule } from 'ng2-opd-popup';
import { AppComponent } from './app.component';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { GamesListingComponent } from './listing/games/games-listing.component';
import { PlatformsListingComponent } from './listing/platforms/platforms-listing.component';
import { routing } from './app.routes';
import 'rxjs/add/operator/map';
@NgModule({
declarations: [
AppComponent,
PlatformsListingComponent,
FooterComponent,
HeaderComponent,
GamesListingComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
HttpModule,
PopupModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
games-listing.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import {Popup} from 'ng2-opd-popup';
@Component({
moduleId: module.id,
selector: 'app-games-listing',
templateUrl: './games-listing.component.html',
styleUrls: ['./games-listing.component.css']
})
export class GamesListingComponent{
games: Object[] = [];
constructor(http: Http, private popup:Popup){
http.get('http://localhost:80/lightning/server/index.php/games')
.map(res => res.json()).subscribe(games => {
this.games = games;
console.log(this.games);
}), erro => console.log(erro);
}
ClickButton(){
this.popup.options = {
header: "Your custom header",
color: "#5cb85c", // red, blue....
widthProsentage: 40, // The with of the popou measured by browser width
animationDuration: 1, // in seconds, 0 = no animation
showButtons: true, // You can hide this in case you want to use custom buttons
confirmBtnContent: "OK", // The text on your confirm button
cancleBtnContent: "Cancel", // the text on your cancel button
confirmBtnClass: "btn btn-default", // your class for styling the confirm button
cancleBtnClass: "btn btn-default", // you class for styling the cancel button
animation: "fadeInDown" // 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'bounceIn','bounceInDown'
};
this.popup.show(this.popup.options);
}
YourConfirmEvent(){
alert('You cliked confirm');
}
YourCancelEvent(){
alert('You cliked cancel');
}
}
games-listing.component.html
<table class="table table-striped">
<thead>
<tr>
<th>Nome</th>
<th>Categoria</th>
<th>Fabricante</th>
<th>Ver mais...</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games">
<td>{{game.name}}</td>
<td></td>
</tr>
</tbody>
</table>
If you need any other code, just let me know what step.
Thank you in advance.