Javascript 在ngFor中创建的组件未正确更新

我正在ngFor中创建组件，不知道为什么它们不能正确更新。下面是一场闪电战：

基本上，当我更新并签出我添加的子组件，然后提交表单时，这些值是空的，我想知道为什么

我知道我可以像这样使用FormBuilder、FormGroup和FormArray，但我很好奇为什么我所做的不起作用

app.component.html

child.component.html

---

我正在编写一些伪代码，只是为了让您易于理解

应用程序组件.ts

// the custom field object
class Field {
   id?: string;
   value?: string;
}

class AppComponent {
    // this is the fields array
    fields: Field[] = [
        {
           id: "myName",
           value: "Test Name"
        },
        {
           id: "myDesc",
           value: "Test Desc"
        }
    ];

    onSubmitClick() {
       console.log(this.fields); // here you ll get what you want 
    }


}

class ChildComponent {
    @Input('field') field: Field;
}

app.component.html

<app-child ngFor="let field of fields" [field]="field"></app-child>
<button (click)="fields.push({})">add</button>
<button (click)="onSubmitClick()">submit</button>

<input #input type="text" (input)="field.value = input.value" />

child.component.html

<app-child ngFor="let field of fields" [field]="field"></app-child>
<button (click)="fields.push({})">add</button>
<button (click)="onSubmitClick()">submit</button>

<input #input type="text" (input)="field.value = input.value" />

---

我还没有测试代码，但它可以满足您的需要。

我正在编写一些伪代码，只是为了让您易于理解

应用程序组件.ts

// the custom field object
class Field {
   id?: string;
   value?: string;
}

class AppComponent {
    // this is the fields array
    fields: Field[] = [
        {
           id: "myName",
           value: "Test Name"
        },
        {
           id: "myDesc",
           value: "Test Desc"
        }
    ];

    onSubmitClick() {
       console.log(this.fields); // here you ll get what you want 
    }


}

class ChildComponent {
    @Input('field') field: Field;
}

app.component.html

<app-child ngFor="let field of fields" [field]="field"></app-child>
<button (click)="fields.push({})">add</button>
<button (click)="onSubmitClick()">submit</button>

<input #input type="text" (input)="field.value = input.value" />

child.component.html

<app-child ngFor="let field of fields" [field]="field"></app-child>
<button (click)="fields.push({})">add</button>
<button (click)="onSubmitClick()">submit</button>

<input #input type="text" (input)="field.value = input.value" />

---

我没有测试代码，但它可以满足您的需要。

您无法访问子组件字段中的更改。为此，您需要使用@ViewChildren和QueryList

import { Component, QueryList,  ViewChild, ViewChildren } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-example';
  childArray: Array<ChildComponent>;
  @ViewChildren(ChildComponent) children1: QueryList<ChildComponent>;

  fields = {
    myName : {
      value:'testName'
    },
    myDesc: {
      value:'testDesc'
    }
  };

  inputBlur(event, fieldName) {
    this.fields[`${fieldName}`].value = event.target.value;
  }

  addChildComponent(){
    this.childArray.push(new ChildComponent());
  }

  onSubmit() {
    const formData: any = new Object();

    const childData = [];
    this.children1.toArray().forEach((child) => {
      const { myValue } = child.fields;
      childData.push({
        'childVal': myValue.value
      });
    });
    formData.childData = childData;

    console.log(formData);
  }

  ngOnInit() {
    this.childArray = new Array<ChildComponent>()
  }
}

从'@angular/core'导入{Component，QueryList，ViewChild，ViewChildren}；
从'./child/child.component'导入{ChildComponent}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘ng示例’；
子数组：数组；
@ViewChildren（ChildComponent）children1:QueryList；
字段={
我的名字：{
值：'testName'
},
myDesc：{
值：'testDesc'
}
};
inputBlur（事件、字段名）{
this.fields[`${fieldName}`].value=event.target.value；
}
addChildComponent（）{
this.childArray.push（new ChildComponent（））；
}
onSubmit（）{
const formData:any=新对象（）；
常量childData=[]；
this.children1.toArray（）.forEach（（child）=>{
const{myValue}=child.fields；
childData.push({
“childVal”：myValue.value
});
});
formData.childData=childData；
console.log（formData）；
}
恩戈尼尼特（）{
this.childArray=新数组（）
}
}

您无权访问子组件字段中的更改。为此，您需要使用@ViewChildren和QueryList

import { Component, QueryList,  ViewChild, ViewChildren } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-example';
  childArray: Array<ChildComponent>;
  @ViewChildren(ChildComponent) children1: QueryList<ChildComponent>;

  fields = {
    myName : {
      value:'testName'
    },
    myDesc: {
      value:'testDesc'
    }
  };

  inputBlur(event, fieldName) {
    this.fields[`${fieldName}`].value = event.target.value;
  }

  addChildComponent(){
    this.childArray.push(new ChildComponent());
  }

  onSubmit() {
    const formData: any = new Object();

    const childData = [];
    this.children1.toArray().forEach((child) => {
      const { myValue } = child.fields;
      childData.push({
        'childVal': myValue.value
      });
    });
    formData.childData = childData;

    console.log(formData);
  }

  ngOnInit() {
    this.childArray = new Array<ChildComponent>()
  }
}

从'@angular/core'导入{Component，QueryList，ViewChild，ViewChildren}；
从'./child/child.component'导入{ChildComponent}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘ng示例’；
子数组：数组；
@ViewChildren（ChildComponent）children1:QueryList；
字段={
我的名字：{
值：'testName'
},
myDesc：{
值：'testDesc'
}
};
inputBlur（事件、字段名）{
this.fields[`${fieldName}`].value=event.target.value；
}
addChildComponent（）{
this.childArray.push（new ChildComponent（））；
}
onSubmit（）{
const formData:any=新对象（）；
常量childData=[]；
this.children1.toArray（）.forEach（（child）=>{
const{myValue}=child.fields；
childData.push({
“childVal”：myValue.value
});
});
formData.childData=childData；
console.log（formData）；
}
恩戈尼尼特（）{
this.childArray=新数组（）
}
}

我不是在贬低你的积极性，但你已经把这件事搞得太复杂了。这可以用一种简单的方法来完成。我尝试过改进你的代码，但这并不容易。让我给你一个简单的方法。你的子组件直接通过@Input接收一个对象，并将该值放入其中，该值应该在（Input）回调中更改，而不是在（inputBlur）中更改并在一个数组上循环，该数组包含您希望数据为的类型的对象，然后单击“添加”按钮，将一个空对象推送到该数组中。如果你想我可以给你写些伪代码我明白你的意思，我只是好奇为什么这不起作用。我不是在贬低你的积极性，但你已经把这件事搞得太复杂了。这可以用一种简单的方法来完成。我试着改进你的代码，但这并不容易。让我给你一个简单的方法。你的子组件直接通过@Input接收一个对象，并将值放入其中，值应该在（Input）中更改回调而不是（inputBlur）并循环到一个数组上，该数组包含您希望数据为的类型的对象，单击“添加”按钮，只需将一个空对象推送到数组中。如果你想的话，我可以为你写一些伪代码，我理解你的意思，只是好奇为什么这不起作用。这正是我想要的。也谢谢你的解释。这正是我要找的。也谢谢你的解释。