在表

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>