Angular 嵌套循环

Question

我使用 angular http 从我的 mysql 数据库中提取数据，最后一个字段包含由“;”分隔的数据但它只是一个字符串。

现在我希望每个值都有一个 html 元素。但最重要的是，我希望我的数据库中的每条记录都有。

我想到了这样的事情： (Template) 管道把字符串变成数组

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

但这不会起作用，因为错误是意外的结束标记 "li"

如果您需要更多代码，请告诉我。

非常感谢您的帮助！

Edit1：关闭 ng-template 标签

现在的错误是 Key[0] 未定义，但我知道数组包含值

Edit2：代码数据收集

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


}
}

管道：

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

编辑：感谢您的帮助。也感谢 Downvoting 帮助像我这样的人开始学习一些东西。

Answer 1

伙计们，我修复了它，感谢@developer033 不知道我没有在变量中使用插值。

    <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 嵌套循环

Angular nested loop

javascript

angular-template

angular