Угловые 5 вложенных массивов

Question

Я пытаюсь использовать ngfor для вложенного вывода json.Первый цикл работает нормально, но внутренний цикл не работает.Мой код

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