在Angular视图中显示数组对象

如何解决在Angular视图中显示数组对象

我有简单的角度形式来保存用户输入。用户可以在其中单击ps-menu按钮以添加所需的任意行，这些行都可以正常工作。

我想如果Add More（在组件上定义）有长度，那么这个testData应该已经在组件初始化上就位了，但是我不知道该怎么做。 / p>

component.ts

testData

index.html

import { Component,VERSION,OnInit } from '@angular/core';
import { FormBuilder,FormGroup,FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 productForm: FormGroup;
 testData = [{ "name": "test-1","age": "24" },{ "name": "test-2","age": "32" },{ "name": "Test-3","age": "20" }]
 constructor(private fb: FormBuilder) {}

 ngOnInit() {
   this.addRowData();
   this.productForm = this.fb.group({
   stepName: 'Field Data',fieldData: this.fb.array([]),});
 }

 fieldData() : FormArray {
  return this.productForm.get("fieldData") as FormArray
 }

 newFieldData(): FormGroup {
  return this.fb.group({
   name: '',age: '',})
 }

 addRowData() {
   this.fieldData().push(this.newFieldData());
 }

 removeRowData(i:number) {
   this.fieldData().removeAt(i);
 }

 onSubmit() {
   console.log(this.productForm.value);
 }
}

解决方法

我在 Stackblitz 上为您创建了一个错误修复的示例。

尝试一下：

app.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,FormControl,Validators,FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 productForm: FormGroup;
 testData = [{ "name": "test-1","age": "24" },{ "name": "test-2","age": "32" },{ "name": "Test-3","age": "20" }]
 constructor(private fb: FormBuilder) {
   this.productForm = fb.group({
     fieldData: this.fb.array([])
   });
 }

 ngOnInit() {
  this.initialize();
 }

get fieldData(): FormArray {
  return this.productForm.get("fieldData") as FormArray;
}

newFieldData() : FormGroup {
  return this.fb.group({
    name: [""],age: [""],})
}

addNewField(){
  this.fieldData.push(this.newFieldData())
}

removeField(i:number) {
  this.fieldData.removeAt(i);
}

onSubmit() {
  console.log(this.fieldData.value);
}

initialize() {
  if( this.testData.length > 0 ) {
    this.testData.forEach((item) => {
       this.fieldData.push(
         this.fb.group({
            name: [item.name],age: [item.age],})
        );
      });
    }
  }

}


// angular form is group of controls

app.component.html

<div class="main-container">
  <form [formGroup]="productForm">
    <div formArrayName="fieldData" class="form-array">
      <div *ngFor="let data of fieldData.controls; let i=index">
        <div [formGroupName]="i" class="form-group">
          <div class="name-container">
            <label for="name">Name:</label>
            <input type="text" formControlName="name">
          </div>
          <div class="name-container">
            <label for="name">Age:</label>
            <input type="text" formControlName="age">
          </div>
          <button class="btn btn-danger" (click)="removeField(i)">Remove</button>
        </div>
      </div>
    </div> 
  </form>
  <p>
    <button class="btn btn-success" type="button" (click)="addNewField()">Add</button>
  </p>
</div>

,

您已经完成了一半，只需修改newFieldData()方法并传递默认数据参数，并检查数据是否存在，设置数据或设置为空值即可。

 // passing data param with default value null 
 newFieldData(data = null): FormGroup {
   return this.fb.group({
     name: data ? data.name : '',// here you can set value if exists else empty
     age: data ? data.age : '',});
}

现在您需要在ngOnInit方法中添加这段代码

if (this.testData.length) {
  this.testData.map((data) => this.fieldData().push(this.newFieldData(data)));
}

就这样，chekcout工作DEMO