Angular 反应式表单输入错误（输入字段未显示）

Question

我创建了一个动态表单 (Angular 10)，它通过调用后端 (Django/DjangoRestFramework).

动态获取 FormControlNames

FormControlNames是我希望用户看到的文章名称。用户必须在绑定到正确 FormControlName 的每个输入字段中写入每篇文章显示的数量，然后提交整个内容。

问题：尽管我可以看到 FormControlNames 已正确创建（显示为）：

  {{myForm?.value|json}}

用户不能为新创建的 FormControlNames 输入任何值，因为输入字段没有出现。我该怎么做才能显示输入字段框？我在控制台上没有收到任何错误。输入框就是不出现。

Screenshot

后端File/Response:

[
    {
        "id": 16,
        "nomeart": "Gambero Abbattuto",
        "completed": false,
        "desart": "code abbattute alla fonte",
        "codiceart": "zgamberiiiiii",
        "peso": 1,
        "taglia": 0,
        "um": "kg"
    },
    {
        "id": 15,
        "nomeart": "Branzino Fresco",
        "completed": false,
        "desart": "è un branzino",
        "codiceart": "ilbraaaa",
        "peso": 1,
        "taglia": 0,
        "um": "kg"
    },
    {...}

]

文件：component.ts

import { Component, OnInit } from '@angular/core';
import { ServerService } from 'src/app/server.service';
import { DataService } from "./data.service";
import { AuthService } from 'src/app/auth.service';
import { FormBuilder, FormGroup,
  Validators, FormArray,
  ReactiveFormsModule, FormControl } from '@angular/forms';
import { delay } from 'rxjs/operators';

  interface articoli {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  interface Pezzi {
    value: string;
  }


@Component({
  selector: 'app-ordine',
  templateUrl: './ordine.component.html',
  styleUrls: ['./ordine.component.scss']
})
export class OrdineComponent implements OnInit {

  myForm: FormGroup;

  articoli: any;

  articolo= {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  constructor(
    private server: ServerService,
    private authService: AuthService,
    public dialog: MatDialog,
    private fb: FormBuilder,
    private dataService: DataService
  ) {}

  ngOnInit() {

    this.server.request('GET', '/api/v1/articolo-list/')
    .subscribe((data: any) => {
      if (data) {
        this.articoli = data;
      }
    });

    this.myForm = this.fb.group({
      title: ["", []],
      articoli: this.fb.group({})
    });
    this.getThings();

  }

  getThings() { 
    this.dataService.getThings().subscribe(data => {
      this.articoli = data;
      this.dataService.arty.forEach(x => {
        (this.myForm.get("articoli") as FormGroup).addControl(
          x.nomeart,
          this.fb.control("0")
        );
      });
    });

  }



  nrpezzi: Pezzi[] = [
    { value: '0'},
    { value: '1'},
    { value: '2'},
    { value: '3'},
    { value: '4'},
    { value: '5'},    
    { value: '6'},
    { value: '7'},
    { value: '8'},
    { value: '9'},
    { value: '10'},
    { value: '11'},
    { value: '12'},
    { value: '13'},
    { value: '14'},
    { value: '15'},
    { value: '16'},
    { value: '17'},
    { value: '18'},
    { value: '19'},
    { value: '20'},
    { value: '21'},
    { value: '22'},
    { value: '23'},
    { value: '24'},
    { value: '25'},
    { value: '26'},
    { value: '27'},
    { value: '28'},
    { value: '29'},
    { value: '30'},
    { value: '31'},
    { value: '32'},
    { value: '33'},
    { value: '34'},
    { value: '35'},
    { value: '36'},
    { value: '37'},
    { value: '38'},
    { value: '39'},
    { value: '40'},
    { value: '41'},
    { value: '42'},
    
  ];

}

文件：dataservice.ts

import { Injectable, OnInit } from "@angular/core";
import { of } from "rxjs";
import { delay } from "rxjs/operators";
import { ServerService } from 'src/app/server.service';
import { AuthService } from 'src/app/auth.service';
import { OrdineComponent } from './ordine.component';

interface articoli {
  id: 'number',
  nomeart: 'string',
  completed: 'boolean',
  desart: 'string',
  codiceart: 'string',
  peso: 'number',
  taglia: 'number',
  um: 'string',
}

@Injectable({
  providedIn: "root"
})

export class DataService {

  constructor(
    private server: ServerService,
    private authService: AuthService,
  ) {}

  
  arty:articoli[] =[];


  articolo= {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  
  getThings() {

    this.server.request('GET', '/api/v1/articolo-list/')
    .subscribe((data: any) => {
      if (data) {
        this.arty = data;
        console.log(data);
      }
    });

    return of(
   [this.articolo.nomeart]
  ).pipe(delay(200));
  }
}

文件：component.html

<form [formGroup]="myForm">
    ...
    <div formGroupName="articoli">
        <mat-card *ngFor="let articolo of arty">
            <input [formControlName]=
            "articolo.nomeart"> 
        </mat-card>
    </div>
  </form>
  {{myForm?.value|json}}
  <hr/>

有人知道我做错了什么吗？

Answer 1

在上面的行中，只是检查你是否在显示 html 的各个组件 ts 层中分配了 arty 的值，请检查 arty 列表值是否正在提交，就像你为 myform

检查的那样

Angular 反应式表单输入错误（输入字段未显示）

Angular Reactive Forms Input Error (input field not showing)

forms

form-control

angular

formgroups