如何“行走"两个数组中使用相同的* ngFor?

问题描述

基本上我有两个数组，我想使用*ngFor同时存储它们的值，我做了这样的事情只是为了展示我的期望:

Basically I have two arrays, and I would like to store their values at the same time using a *ngFor, I did something like this just to show what I would expect:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
            <mat-form-field appearance="standard" class="fullSize">
              <mat-label>Titulo</mat-label>
              <input [formControlName]="i" type="text" matInput id="field_{{i}}" autocomplete="off"
                placeholder="Titulo">
            </mat-form-field>
    </div>

     <div formArrayName="alternativeFieldsValues" *ngFor="let value of alternativeFieldsValues.controls; let i = index">
              <mat-form-field appearance="standard" class="fullSize">
                  <mat-label>Conteúdo</mat-label>
                  <input [formControlName]="i" type="text" matInput id="value_{{i}}" autocomplete="off"
                    placeholder="Conteúdo deste campo">
              </mat-form-field>
      </div>

还具有将输入内容放入HTML的功能:

Also have that function that puts the Inputs into the HTML:

addAlternativeField() {
        this.alternativeFields.push(this.fbuilder.control(''));
        this.alternativeFieldsValues.push(this.fbuilder.control(''));
      }

最麻烦的问题是，在第一次推送之后，字段将不会是我想要的(TITLE/VALUE； TITLE/VALUE):

The obvius problem is that after the first push the fields are not going to be as I would like(TITLE/VALUE ; TITLE/VALUE):

第二次执行就是我得到的:

At the second execution that's what I get:

我想知道如何保持所需的格式(TITULO/CONTEUDO)，而不会出现上述问题.我不认为这很困难，但是我不知道是否可以使用* ngFor

I would like to know how to keep that desired format(TITULO/CONTEUDO), without that problem above.I don't think it's very hard, but I don't know if I can do it In a simple way using the *ngFor

我也试图做这样的事情:

I also tried to do something like this:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Titulo</mat-label>
            <input formControlName="alternativeFields" type="text" matInput autocomplete="off"
              placeholder="Titulo">
          </mat-form-field>
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Conteúdo</mat-label>
            <input formControlName="alternativeFieldsValues" type="text" matInput autocomplete="off"
              placeholder="Conteúdo deste campo">
          </mat-form-field>
        </div>
      </div>

但是我得到了这个错误:

But I got that error:

ERROR Error: Cannot find control with path: 'alternativeFields -> 0 -> alternativeFields'
    at _throwError (forms.js:2144)
    at setUpControl (forms.js:2052)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)

它说这些不是在表单上定义的，但实际上是:

It says these are not defined at the form, but they actually are:

this.form = this.fbuilder.group({
      index: [''],
      id: [''],
      name: ['', Validators.required],
      value: ['', Validators.required],
      title: ['', Validators.required],
      description: [''],
      alternativeFields: this.fbuilder.array([]),
      alternativeFieldsValues: this.fbuilder.array([])
    });

一些提示?

我也有以下方法:

get alternativeFields() {
    return this.form.get('alternativeFields') as FormArray;
  }

  get alternativeFieldsValues() {
    return this.form.get('alternativeFieldsValues') as FormArray;
  }

  addAlternativeField() {
    this.alternativeFields.push(this.fbuilder.control(''));
  }

  removeAlternativeField(index: any) {
    this.alternativeFields.removeAt(index);
  }

  get f() { return this.form.controls; }

推荐答案

我相信您的错误是拥有2组控件而不是一组组:

I believe your mistake is having 2 arrays of controls instead of one array of groups:

alternativeFieldsAndValues: this.fbuilder.array([]),

然后:

 get alternativeFieldsAndValues() {
   return this.form.get('alternativeFieldsAndValues') as FormArray;
 }

  addAlternativeFieldAndValue() {
    this.alternativeFieldsAndValues.push(this.fbuilder.group({
      titulo: '',
      conteudo: ''
    }));
  }

  removeAlternativeFieldAndValue(index: any) {
    this.alternativeFieldsAndValues.removeAt(index);
  }

确保正确重构所有名称，然后执行以下操作:

make sure to refactor all names properly then do this:

 <div formArrayName="alternativeFieldsAndValues" *ngFor="let field of alternativeFieldsAndValues.controls; let i = index">
    <div [formGroupName]="i">
      <mat-form-field appearance="standard" class="fullSize">
        <mat-label>Titulo</mat-label>
        <input formControlName="titulo" type="text" matInput autocomplete="off"
          placeholder="Titulo">
      </mat-form-field>
      <mat-form-field appearance="standard" class="fullSize">
        <mat-label>Conteúdo</mat-label>
        <input formControlName="conteudo" type="text" matInput autocomplete="off"
          placeholder="Conteúdo deste campo">
      </mat-form-field>
    </div>
  </div>

话虽如此，您可以完全按照以下要求完成任务:

that being said, you could accomplish exactly what you asked like this:

   <div *ngFor="let field of alternativeFields.controls; let i = index">
      <mat-form-field formArrayName="alternativeFields" appearance="standard" class="fullSize">
        <mat-label>Titulo</mat-label>
        <input [formControlName]="i" type="text" matInput autocomplete="off"
          placeholder="Titulo">
      </mat-form-field>
      <mat-form-field formArrayName="alternativeFieldsValues" appearance="standard" class="fullSize">
        <mat-label>Conteúdo</mat-label>
        <input [formControlName]="i" type="text" matInput autocomplete="off"
          placeholder="Conteúdo deste campo">
      </mat-form-field>
    </div>

但这确实需要两个列表的长度始终相同.

but this does require the two lists are ALWAYS of the same length.

这篇关于如何“行走"两个数组中使用相同的* ngFor?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！