Angular nested loop

Question

i pull data from my mysql database with angular http and have a last field that contains data which is separated by a ";" but its only a string.

Now i want to have a single html element for each of this values. But on top of that i want that for each record in my database.

I thought of something like this: (Template) The Pipe turns the String into an array

        <li *ngFor="let form of data">

       {{form.idform_data}} - {{form.form_name}} -
         {{form.field_name}} - {{form.field_type}} -
         {{form.field_desc}} -
       <ng-template *ngFor = "let item of  {{form.field_data | splitAndGet : ";"}}">
         {{item}}
        </ng-template>
 </li>

But that wont work because the error is Unexpected closing tag "li"

If you need further code just tell me.

Would really appreciate some help right here!

Edit1: closed ng-template tag

Error now is Key[0] is undefined but i know that the array contains values

Edit2: Code Data Gathering

import { Component } from '@angular/core';
import { Injectable }              from '@angular/core';
import { Http, Response }          from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
private data;


constructor(private http:Http){
}

ngOnInit(){
  console.log("ngOnInit");
    this.getData();

}

getData(){
    console.log("fetching Data");
    this.http.get('http://192.168.178.42/getFormDbData.php')  //Pfad zur php datei
            .subscribe(response =>{ this.data = response.json()
                                console.log(JSON.stringify(response.json()))});


}
}

Pipe:

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({ name: "splitAndGet" })
export class SplitAndGetPipe implements PipeTransform {
  transform(input: string, separator: string, index:number): any {
    var splitarr = input.split(separator);
    return splitarr;
  }
}

Edit : thanks for helping. Also thanks for Downvoting that helps people like me which begin to learn something.

i closed it now and get Key[0] is undefined error but i know that the array contains values. — Henry Sachs, Jul 10 '17 at 18:24
You must not use interpolation in that `*ngFor`. Also, what's the reason to use `ng-template`? I'd recommend you to use `ng-container` if you don't want to render any HTML tag. — developer033, Jul 10 '17 at 18:47
As @developer033 pointed out, you can't use `*ngFor` in combination with a `ng-template` tag, either replace it with a div or use ngFor differently as explained in [here](https://stackoverflow.com/questions/43177742/ngfor-on-ng-template-outputs-nothing-angular2) — realappie, Jul 10 '17 at 18:49
TBH i dont really care about the tag i just want the data to be printed out. — Henry Sachs, Jul 10 '17 at 18:50
Another point is that you're fetching your data async, so you either, initialize your array as `[]` or put a condition to check it, before `*ngFor` (in template). — developer033, Jul 10 '17 at 18:52
At the Moment we are talking about a little data set which will be fetched completly. I can care about that when I know how to actually get the data. — Henry Sachs, Jul 10 '17 at 18:53
I already explained the **undefined** error. Just read and fix it :) Another point is that you're using **double** quotes inside **double** quotes here: `...splitAndGet : ";"...`. Change it to **single** quotes... urgh! there are several mistakes in your code... — developer033, Jul 10 '17 at 18:54
you can pls correct me for my faults i'm at the very beginning. I already fixxed the qoutes. — Henry Sachs, Jul 10 '17 at 18:58
If you could help me to wait till data is fetched i would be grateful — Henry Sachs, Jul 10 '17 at 19:06
The simplest way is to initialize the array in declaration: `data = [];` Also, I noticed that you're using `private`... AOT will complain once you build the production build. For variables that will be used in template, use `public` or simply *nothing*, just `data = []` :) — developer033, Jul 10 '17 at 19:09

score 0 · Accepted Answer · answered Jul 10 '17 at 18:56

So guys i fixxed it know thanks to @developer033 didnt knew that i dont use interpolation in the variable.

    <li *ngFor="let form of data">

       {{form.idform_data}} - {{form.form_name}} -
         {{form.field_name}} - {{form.field_type}} -
         {{form.field_desc}} -
        <div *ngFor = "let item of form.field_data | splitAndGet : ';'">
         <p>{{item}}</p>
     </div>
 </li>

Angular nested loop

1 Answers1