Это мой HTML-код, в котором я пытаюсь отобразить свои данные JSON, в основном создавая динамическую форму с использованием подхода на основе шаблонов.Я не понимаю, где я иду не так
app-component.html
<div class="ui-g">
<ng-container *ngFor="let a of UserFormArray; let i = index">
<form #f="ngForm" name="FormName">
<div class="ui-g">
<ng-container *ngFor="let ab of a[i]; let i2 = index"> {{ab[i2]}}
<ng-container *ngIf="ab[i2].type === 'text'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
Input Text
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<input type={{ab.type}} pInputText name={{ab.name}} ngModel #ngModel="ngModel" required>
<p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</div>
</ng-container>
<ng-container *ngIf="ab.type === 'groupCheckBox'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
Group CheckBox
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<ng-container *ngFor="let item of ab.groupCheckBoxValue; let i = index">
<p-checkbox name={{ab.groupCheckBoxName[i]}} value="{{ab.groupCheckBoxValue[i]}}" label="{{ab.groupCheckBoxValue[i]}}" ngModel
#ngModel="ngModel" required></p-checkbox>
<p-message severity="error" text="{{ab.groupCheckBoxName[i]}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="ab.type === 'checkbox'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
CheckBox
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<p-checkbox name={{ab.name}} value="{{ab.value}}" label="{{ab.value}}" ngModel #ngModel="ngModel" required></p-checkbox>
<p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</div>
</ng-container>
<ng-container *ngIf="ab.type === 'radio'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
Radio button
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<ng-container *ngFor="let item of ab.radioValue; let i = index">
<p-radioButton name={{ab.name}} value="{{ab.radioValue[i]}}" label="{{ab.radioValue[i]}}" required ngModel #ngModel="ngModel"></p-radioButton>
<p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="ab.type === 'dropdown'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
Dropdown
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<p-dropdown name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-dropdown>
<p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</div>
</ng-container>
<ng-container *ngIf="ab.type === 'multidropdown'">
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
multi Dropdown
</div>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<p-multiSelect name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-multiSelect>
<p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
</div>
</ng-container>
</ng-container>
</div>
</form>
<div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
<p-button label="Click" (onClick)="sender(f)"></p-button>
</div>
</ng-container>
</div>
Данные JSON
[
{
"name": "firstname",
"type": "text",
"placeholder": "Enter your name"
},
{
"name": "city1",
"type": "checkbox",
"value": "aditya"
},
{
"name": "LastName",
"type": "text",
"placeholder": "Enter your name"
},
{
"groupCheckBoxName": [
"vehicle1",
"vehicle2",
"vehicle3"
],
"type": "groupCheckBox",
"groupCheckBoxValue": [
"Bike",
"Car",
"Boat"
]
},
{
"name": "gender",
"type": "radio",
"radioValue": [
"male",
"female",
"other"
]
},
{
"name": "city",
"type": "dropdown",
"dropDownValue": [
{
"label": "Select City",
"value": null
},
{
"label": "New York",
"value": {
"id": 1,
"name": "New York",
"code": "NY"
}
},
{
"label": "Rome",
"value": {
"id": 2,
"name": "Rome",
"code": "RM"
}
},
{
"label": "London",
"value": {
"id": 3,
"name": "London",
"code": "LDN"
}
},
{
"label": "Istanbul",
"value": {
"id": 4,
"name": "Istanbul",
"code": "IST"
}
},
{
"label": "Paris",
"value": {
"id": 5,
"name": "Paris",
"code": "PRS"
}
}
]
},
{
"name": "multicity",
"type": "multidropdown",
"dropDownValue": [
{
"label": "Select City",
"value": null
},
{
"label": "New York",
"value": {
"id": 1,
"name": "New York",
"code": "NY"
}
},
{
"label": "Rome",
"value": {
"id": 2,
"name": "Rome",
"code": "RM"
}
},
{
"label": "London",
"value": {
"id": 3,
"name": "London",
"code": "LDN"
}
},
{
"label": "Istanbul",
"value": {
"id": 4,
"name": "Istanbul",
"code": "IST"
}
},
{
"label": "Paris",
"value": {
"id": 5,
"name": "Paris",
"code": "PRS"
}
}
]
}
]
Из службы я извлекаю эти данные и сохраняю их в UserFormArray, который является моим массивом, в котором я использую ngFor.Но он показывает мне только кнопку 
app-component.ts
@Input()
data : FormValue[];
ngOnChanges() {
if(!!this.data){
this.UserFormArray = this.data
console.log("data ngonchange", this.UserFormArray);
}
с использованием ngOnChange, потому что хотите назначить данные длямассив, чтобы он отображал данные