如何显示数组“Products”中的数据：[{}]

Question

如何在我的 EditForm 中填充这个 JSON。我有 EditForm，我想显示我的数据，我的 ws 给我这个 JSON。我在Products之外的数据可以用html显示，但是Products里面的数据我不知道为什么不显示。有什么问题？

这是我的 Json

{
    "StatusCode": 0,
    "StatusMessage": "OK",
    "StatusDescription": [
        {
            "Products": [
                {
                    "p_id": "11E8218A54B30C89AE8800FF76874A59",
                    "p_pt_id": "11E7FC041F467AD4B09D00FF76874A59",
                    "p_l": 233,
                    "p_d": "test",
                    "p_q": 4,
                    "p_u_p": 50,
                    "p_s": 120                  
                }
            ],
            "sale_item_id": "11E8219D916A69F6AE8800FF76874A59",
            "sale_id": "11E8218B9BA4F278AE8800FF76874A59",
            "client_id": "11E8218A57B28B0AAE8800FF76874A59",
            "sale_date": "2018-03-06T22:09:43.000Z",
            "notes": "testing",
            "subtotal": 80,
            "total": 50,
            "invoice_number": "28282",
            "invoice_date": "2018-03-06T21:57:41.000Z",
            "amount_paid": 32       
        }
    ]
}

我的 ts 代码。

editForm: FormGroup;    

    this.editForm = this.fb.group({

      'sale_id': new FormControl('', Validators.required),
      'client_id': new FormControl('', Validators.required),
      'sale_date': new FormControl('', Validators.required),
      'notes': new FormControl('', Validators.required),
      'total': new FormControl('', Validators.required),
       'p_d': new FormControl('', Validators.required),
        'p_pt_id': new FormControl('', Validators.required),
         'p_l': new FormControl('', Validators.required),
      'products': new FormControl([])
    });

  populateForm() {
    this.activatedRoute.params.subscribe(
      params => {
        this.ws.salegetbyid(params['id']).subscribe(
          sale => {
            this.sale = sale;
            this.editForm.controls['sale_id'].setValue(sale.sale_id);
            this.editForm.controls['client_id'].setValue(sale.client_id);
            this.editForm.controls['sale_date'].setValue(sale.sale_date);
            this.editForm.controls['notes'].setValue(sale.notes);
            this.editForm.controls['total'].setValue(sale.total);
              this.editForm.patchValue({
              p_pt_id: this.sale.products.map(x => x.p_pt_id),
              p_l: this.sale.products.map(x => x.p_l),
                 p_d: this.sale.products.map(x => x.p_d)
            })
           }
        );

      }
    );
  }

还有我的html代码

<form [formGroup]="editForm" (ngSubmit)="oneddit()" class="col s12" materialize>

  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
        sale_id:
        <input formControlName="sale_id" id="sale_id" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        client_id:
        <input formControlName="client_id" id="client_id" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        sale_date:
        <input formControlName="sale_date" id="sale_date" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        notes:
        <input formControlName="notes" id="notes" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        total:
        <input formControlName="total" id="total" type="number" class="validate">
      </div>
    </div>
  </div>
  <br>

  <table align="center" class="table table-bordered table-hover">

    <thead>
      <tr style="color:black;">
        <th>p_d</th>
        <th>p_pt_id</th>
        <th>p_l</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products;">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>
  </table>
  <br>

  <div class="row" style="float: right;">
    <button id="add_client_button" type="submit" class="btn waves-effect waves-light">
      Register
    </button>
  </div>
</form>

我修改了这段代码，比如

ts 代码：

'products': this.fb.array([])

 this.sale.products.forEach(x => {
          (this.editForm.get('products') as FormArray).push(new FormControl(x.products))
        }) 

在 html 中：

   <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>

但此更改向我显示此错误： 错误类型错误：无法在 Object.eval [as updateRenderer] 处读取 null 的属性“item.p_d”

你能帮我吗，有什么问题吗？

Answer 1

我解决了这个问题，像这样

this.sale.products.forEach(product => {
    (this.editForm.get('products') as FormArray).push(this.createFGPoduct(product))
})

    createFGPoduct(product: Product): FormGroup {
        return new FormGroup({
           p_id: new FormControl(product.p_id),
           p_pt_id: new FormControl(product.p_pt_id, [Validators.required]),
           p_l: new FormControl(product.p_l, [Validators.required]),
           p_d: new FormControl(product.p_d, [Validators.required])

        })
    }

HTML 代码。

 <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>

Answer 2

首先输入你的html{{editForm.value | json}}，看看里面有什么。

其次，我假设this.sale.products 指的是StatusDescription。现在products 是一个数组，让我们说product 对象。 您向products 询问product 属性。所以假设你正确地映射了你的对象，你需要在html 中的editForm.get('products').value。表单数组是FormGroup 的数组，它们又具有FormControl

试试这个：

     this.sale.products.forEach(x => {
              (this.editForm.get('products') as FormArray).push(new FormGroup({
           p_id: x.p_id,
           p_l: x.p_l // and so on
         }))
     })