在表中使用多个 ngFor

Question

我正在尝试以表格格式显示从我的 GET API 接收到的数据 (JSON)。但是，我还提供了一个选项来搜索我正在使用管道的那个表。代码如下所示：

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>

我在变量 getdata 中以 JSON 格式获取数据，如下所示：

 [{
  "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"
    }
  ]
}]

如何在表格中添加 ngFor 以显示 configName 和其他详细信息，例如 no。表格格式的源和源名称，同时还保留我为搜索 configName 而编写的 ngFor？

Answer 1

你需要这样的东西来迭代 getdata 和它下面的源

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