Angular 5 个嵌套数组

Question

我正在尝试在嵌套的 json 输出上使用 ngfor。第一个循环工作正常，但内部循环不工作。我的代码是

Ts文件

import { Component, OnInit } from '@angular/core';
import { TiffinService } from '../tiffin.service';
import { IVen } from '../vendor';

@Component({
  selector: 'app-tabletest',
  templateUrl: './tabletest.component.html',
  styleUrls: ['./tabletest.component.css']
})
export class TabletestComponent implements OnInit {
  vend: IVen[];

  constructor(private apiService: TiffinService) { }

  ngOnInit(){
    this.apiService.getVendor('1')
          .subscribe(
          resultArray => {
          this.vend = resultArray;
        });
  }
}

服务的输出是

[{"Cat":[{"Catname":"Daily","Catprice":15.99},{"Catname":"Weekly","Catprice":99.99}],"Vaddress1":"vad1","Vaddress2":"vad2","Vcell":"123456789","Vcity":"milton","Vemail":"v@ven.ca","Vid":1,"Vname":"vendor1","Vpcode":"l9t0p2","Vphone":"123456789"},{"Cat":[{"Catname":"Daily","Catprice":15.99},{"Catname":"Weekly","Catprice":110.99}],"Vaddress1":"vad1","Vaddress2":"vad2","Vcell":"123","Vcity":"milton","Vemail":"v@ven.ca","Vid":2,"Vname":"vendor2","Vpcode":"l9","Vphone":"123"}]

html 文件是

<div *ngFor="let item of vend">
   <table>

      <ng-container>
        <tr>
          <td colspan="2">{{item.Vname}}</td>
        </tr>
        <tr *ngFor="let value of vend.Cat">
          <td>{{value.Catname}}</td>
        </tr>
      </ng-container>
   </table>
<div>

Answer 1

您需要访问 item.Cat 而不是从父循环检索的 vend

<div *ngFor="let item of vend">
   <table>    
      <ng-container>
        <tr>
          <td colspan="2">{{item.Vname}}</td>
        </tr>
        <tr *ngFor="let value of item.Cat">
          <td>{{value.Catname}}</td>
        </tr>
      </ng-container>
   </table>
<div>

STACKBLITZ DEMO

Angular 5 个嵌套数组

Angular 5 nested arrays

javascript

angular

angular5

Ts文件