如何以角度排列自定义表格元素？

Question

我有一个表格，我在表格中显示嵌套的 json 元素。从 asp.net 核心后端获取数据。 使用这种方法获取嵌套元素是否是更好的方法？我面临的问题如下。

我的 HTML 看起来像：

<table class="table text-center table-hover table-striped mb-3" [hidden]="!isShow" *ngFor="let kc of 
   kubeConfig">
      <thead class="bg-primary text-white">
        <th appBtn [sortKey]="'metadataName'" [data]="kubeConfig">Metadata Name</th>
        <th appBtn [sortKey]="'status'" [data]="kubeConfig">Status</th>
        <th appBtn [sortKey]="'type'" [data]="kubeConfig">Type</th>
        <th appBtn [sortKey]="'reason'" [data]="kubeConfig">Reason</th>
        <th appBtn [sortKey]="'message'" [data]="kubeConfig">Message</th>
      </thead>
      <tbody>       
        <tr>
          <td>{{ kc.metadataName }}</td>         
        </tr>      
        <tr *ngFor="let item of kc.status">
          <td>{{ item }}</td>
        </tr>
        <tr *ngFor="let item of kc.type">
          <td>{{ item }}</td>
        </tr>
        <tr *ngFor="let item of kc.reason">
          <td>{{ item != null ? item : 'null' }}</td>
        </tr>
        <tr *ngFor="let item of kc.message">
          <td>{{ item != null ? item : 'null' }}</td>
        </tr>       
      </tbody>
    </table>

结果是：

我想达到这样的结果：

ASP.NET CORE 获取数据的方法：

[HttpGet("kubeconfig")]
public IActionResult GetKubeConfig()
{
    var config = KubernetesClientConfiguration.BuildConfigFromConfigFile("project.conf");
    IKubernetes client = new Kubernetes(config);
    var podList = client.ListNamespacedPod("default");           
    var result = from item in podList.Items
                 select new
                 {
                     MetadataName = item.Metadata.Name,
                     Status = item.Status.Conditions.Select(x => x.Status),
                     ...other details                           
                 };
    return Ok(result);
}

嵌套 json 示例：

"metadataName": "argocd-application-controller-6dfcdbb676-d56vm",
        "status": [
            "True",
            "True",
            "True",
            "True"
        ],
        "type": [
            "Initialized",
            "Ready",
            "ContainersReady",
            "PodScheduled"
        ],
        "reason": [
            null,
            null,
            null,
            null
        ],
        "message": [
            null,
            null,
            null,
            null
        ],

Answer 1

原因是您分别循环使用 tr 包围的每个项目。

要解决此类问题，请进行如下更改：

<table class="table text-center table-hover table-striped mb-3"  *ngFor="let kc of
 kubeConfig">
<thead class="bg-primary text-white">
  <tr>
    <th>Metadata Name</th>
    <th>Status</th>
    <th>Type</th>
    <th>Reason</th>
    <th>Message</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let index of kc.status; index as i">
    <td>{{ kc.metadataName }}</td>
    <td>{{ kc.status[i] }}</td>
    <td>{{ kc.type[i] }}</td>
    <td>{{ kc.reason[i] != null ?  kc.reason[i] : 'null' }}</td>
    <td>{{ kc.message[i] != null ?  kc.message[i] : 'null' }}</td>
  </tr>
</tbody>

结果：

Answer 2

您可以按照此链接https://material.angular.io/components/table/overview中的步骤使用Angular Material

Answer 3

您通过将ngFor 放在表上来创建多个表。这是错误的。请将您的html 替换为此

<table class="table text-center table-hover table-striped mb-3" [hidden]="!isShow">
  <thead class="bg-primary text-white">
    <th appBtn [sortKey]="'metadataName'" [data]="kubeConfig">Metadata Name</th>
    <th appBtn [sortKey]="'status'" [data]="kubeConfig">Status</th>
    <th appBtn [sortKey]="'type'" [data]="kubeConfig">Type</th>
    <th appBtn [sortKey]="'reason'" [data]="kubeConfig">Reason</th>
    <th appBtn [sortKey]="'message'" [data]="kubeConfig">Message</th>
  </thead>
  <tbody> 
    <tr *ngFor="let kc of kubeConfig">
        <td>{{ kc.metadataName }}</td> 
        <td>{{ kc.status }}</td> 
        <td>{{ kc.type }}</td> 
        <td>{{ kc.reason }}</td> 
        <td>{{ kc.message }}</td> 

    </tr>      
  </tbody>