As all questions look like they are outdatet i'm asking this Question.
First of all I need to mention that I just started Angular 4 days ago, so please explain everything like you would to your child ( or sth. that comes near that haha).
I currently try to retrieve a JSON from a Flask Server.
It has this format.
{"id":[1,2,3],"name":["Test 1","Test 2","Test 3"]}
The examples will be missing the Imports because it worked properly when testing and now the data should come from a Server.
When I try to Iterate using *ngFor the following error shows up.
Error: "Error trying to diff 'Test 1,Test 2,Test 3'. Only arrays and iterables are allowed"
The HTML for this is:
<ul>
<li *ngFor="let test of tests">
<a routerLink="/detail/{{test.id}}">
<span>{{test.id}}</span> {{test.name}}
</a>
</li>
</ul>
In my test.service.ts it looks the following.
...
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class TestService {
private testUrl = 'http://my.server/tests';
constructor(
private http: HttpClient
) { }
getTests(): Observable<Test[]> {
return this.http.get<Test[]>(this.testUrl);
}
...
And in my tests.component.ts like this:
...
@Component({
selector: 'app-tests',
templateUrl: './tests.component.html',
styleUrls: ['./tests.component.css']
})
export class TestsComponent implements OnInit {
tests: Test[];
getTests(): void {
this.testService.getTests()
.subscribe(tests => this.tests = tests);
}
constructor(private testService: TestService) { }
ngOnInit(): void {
this.getTests();
}
}
After trying to figure it out for 2 hours I don't know how any further.
If something is missing tell me.
Cheers!
