Question

我有一个json响应

application/x-image

我希望它显示在HTML页面上并制作一个动态表格。（我已经提到过我在HTML中使用的代码）但是它没有显示任何数据并且没有给出异常，因为没有找到firstArray-> 0-> secondArray-> 0

的值

我在这里也提到了.ts文件代码。请识别并帮助更正代码。我已经尝试了所有类型的ngFor条件命令。但是没有任何办法使它成为动态形式。

{
    "firstArray":[
        {
            "secondArray":[
                "firstElement",
                "secondElement",
                "thirdElement"
            ]
        }
    ]   
}

<div formArrayName="firstArray">
  <div *ngFor="let first of groupName.get('firstArray').controls; let i = index">
    <div [formGroupName]="i">
      Second: 
      <ul formArrayName="secondArray">
        <div *ngFor="let second of first.get('second').controls; let in = index">
          <input type="text" value={{second.value}} formControlName="in">
        </div>
      </ul>
      <button (click)="addSecondArrayElement()">Add</button>
    </div>
  </div>
</div>

Answer 1

您可以通过以下方式解决：

User

<div class="container">
  <div class="row">
    <div class="col-12">

      <form [formGroup]="form" (ngSubmit)="submit()">
        <div formArrayName="firstArray">
          <div *ngFor="let X of form.controls.firstArray.controls; let ix=index">
            <div formGroupName="{{ix}}" class="Xs">
              <div formArrayName="secondaryArray">
                <div class="form-group" *ngFor="let Y of X.controls.secondaryArray.controls; let iy=index">
                  <label for="id-{{iy}}">Element {{iy}}</label>
                  <input type="text" id="id-{{iy}}" class="form-control" [formControlName]="iy">
                </div>
              </div>
            </div>
            <button type="button" class="btn btn-secondary" (click)="addSecondArrayElement()">add</button>
          </div>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

   </div>
  </div>
</div>

可复制的Example

如何迭代另一个formArray中的字符串数组的formArray？

1 个答案: