Question

我的嵌套反应形式存在问题：它不是被动的。我有几个ngfor，但是当控件更新时，浏览器中没有任何变化。所以首先是代码：

   <form [formgroup]="newRequest" >
        <div formarrayname="roundway">
          <div *ngfor="let item of newRequest.controls['roundway'] | arraypipe; let i=index">
            <div [formgroupname]="i" >
              <h4 *ngif="roundtrip">{{i===0 ? 'Aller' : 'Retour' }}</h4>
              ***mat-form-fields***
              <div formarrayname="viaOut" *ngif="viaOut">
                <div *ngfor="let item of newRequest.controls.roundway.controls[i].controls.viaOut | arraypipe; let j=index">
                  ***mat-form-fields***
                </div>
                <button mat-icon-button="" type="button" (click)="removeViaOut()" [disabled]="viaOut<2" fxflexalign="center">
                  <mat-icon matprefix="">remove</mat-icon>
                </button>
                <button mat-icon-button="" type="button" (click)="addViaOut()" [disabled]="viaOut>2" fxflexalign="center">
                  <mat-icon matprefix="">add</mat-icon>
                </button>
              </div>
              <!--Vols -->
              <div formarrayname="flights" fxlayout="row" fxlayoutalign="start center" fxlayoutwrap="">
                <div *ngfor="let item of newRequest.controls.roundway.controls[i].controls.flights | arraypipe; let k=index" fxlayout="row" fxlayoutgap="30px">
                  <div fxlayoutalign="start center" fxlayoutgap="30px" fxlayoutwrap="" [formgroupname]="k">
                    <h5 *ngif="viaOut>=1">Vol n°{{k+1}}</h5>

                    ***mat-form-fields***
                  </div>
                </div>
              </div>
            </form>

我的打字稿

    export class NouvelledemandeComponent implements OnInit {
  public newRequest: FormGroup;

  // Minimal date
  minDate = new Date();

  // Conditions for details display
  daterange = false;
  differentflights = false;
  details = false;
  viaIn = 0;
  viaOut = 0;
  roundtrip = false;

  // Form controllers
  classFC: FormControl = new FormControl();


  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.newRequest = this._fb.group({
      roundway: this._fb.array([
        this.initRoundway()
    ])
    });
  }

  initFlights() {
      return this._fb.group({
          class: ['', Validators.required],
          flightNb: [''],
          timeMin: [''],
          timeMax : ['']
      });
  }


  addFlight() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.flights');
      control1.push(this.initFlights());
}

  removeFlight() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.flights');
      control1.removeAt(control1.length - 1);
  }


  addViaOut() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.viaOut');
    control1.push(new FormControl(null));
    this.viaOut++;
    this.addFlight();
  }

  removeViaOut(i: number) {
    const control1 = <FormArray>this.newRequest.get('roundway.0.viaOut');
    control1.removeAt(control1.length - 1);
    this.viaOut--;
    this.removeFlight();
  }

  addViaIn() {
    const control = <FormArray>this.newRequest.get('roundway.0.viaIn');
    control.push(new FormControl(null));
    this.viaIn++;
  }

  removeViaIn(i: number) {
    const control = <FormArray>this.newRequest.controls['viaIn'];
    control.removeAt(control.length - 1);
    this.viaIn--;
  }



initRoundway() {
      return this._fb.group({
        daterangeOutFrom: [],
        daterangeOutTo: [],
        viaOut: this._fb.array([]),
        viaIn: this._fb.array([]),
        flights: this._fb.array([
          this.initFlights()
      ])
      });
  }



}

所以我的问题是，无论何时触发toggleVia，都会添加一个via和一个航班（我可以通过console.log查看我的航班数组和我的viaout数组已更新），但它不会出现在浏览器上。好像我的ngfor运行一次，当组件启动时，那就是全部;即使阵列更新也没有任何反应。

感谢您的帮助

Answer 1

所以我终于找到了问题。我有这样的ngFor：

<div *ngfor="let item of newRequest.controls['roundway'] | arraypipe; let i=index">

问题在于：它应该是<div *ngfor="let item of newRequest.controls.roundway.controls; let i=index">

我的所有ngFor都遇到了同样的问题，因此每当数组的控件发生更改时，它都不会更新视图，因为没有在控件上设置ngFor。管道那种“打破”了这一切;之前需要它，但现在它被设置在控件上，这显然是一个数组，它是无用的。最后，路径写得不正确。

Angular：反应性嵌套表单不会更新

1 个答案: