Using multiple ngFor in tables

Question

I am trying to display the data received (JSON) from my GET API in tabular format. However, I am also giving an option to search upon that table for which I am using a pipe. The code looks like below :

html

    <div class="row" *ngIf="!addNewConfig">
    <div class="col-xs-2">
        <div class="form-group margin-b0px">
            <label class="float-label with-icon" [class.empty]="searchField.length==0">
                <span class="placeholder">Search a Config.
                    <span class="hide-placeholder">&nbsp;</span>
                </span>
                <input [(ngModel)]="queryString" type="text" class="search">
            </label>
        </div>
    </div>
    <div class="col-xs-1 pull-right text-right clickable">
        <img src="dvn/images/plus-icon.png" alt="Add" (click)="addNewConfig = true;">
    </div>
</div>
<ng-container *ngIf="!addNewConfig">
    <table *ngIf="!addtionalInfo" class="primary-table table table-hover">
        <thead>
            <tr>
                <th>Config NAME</th>
                <th>NO. OF SOURCES</th>
                <th>SRC NAME(S)</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let n of names | FilterPipe: queryString">
                <td>
                    <a (click)="addtionalInfo = true" class="clickable">{{n}}</a>
                    <button (click)="getData()"> Test Get Request</button>>
                </td>
                <td>2</td>
                <td>CardTransStream, SampleText1</td>
            </tr>
        </tbody>
    </table>

I am getting the data in JSON in variable getdata which looks like below :

 [{
  "configName": "config1",
  "queryTimeThresholdInMs": 0,
  "sources": [
    {
      "baseline": true,
      "order": 0,
      "query": "string",
      "sourceId": "string",
      "sourcePath": "string",
      "sourceType": "string"
    },
        {
      "baseline": false,
      "order": 1,
      "query": "string",
      "sourceId": "string",
      "sourcePath": "string",
      "sourceType": "string"
    }
  ]
  },
{
  "configName": "config2",
  "queryTimeThresholdInMs": 0,
  "sources": [
    {
      "baseline": true,
      "order": 0,
      "query": "string",
      "sourceId": "string",
      "sourcePath": "string",
      "sourceType": "string"
    },
      {
      "baseline": false,
      "order": 1,
      "query": "string",
      "sourceId": "string",
      "sourcePath": "string",
      "sourceType": "string"
    }
  ]
}]

How can I add a ngFor in the table to display the configName and other details like no. of sources and source name in tabular format while also maintaining the ngFor that I have written for searching over configName ?

Answer 1

You need something like this to iterate over getdata and then sources under it

<div *ngFor="let mem of getdata "> 
    {{mem.configName}}
    <div class="card-container">
      <div *ngFor="let source of mem.sources">
        {{source.query}}
      </div>
    </div>
</div>