C# 如何按角度排列自定义表格元素？

我有一个表，我正在表中显示嵌套的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>

嵌套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
        ],

---

您可以按照此链接中的步骤使用角度材质

通过将

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>

元数据名称
地位
类型
理由
消息
{{kc.metadataName}
{{kc.status}
{{kc.type}
{{kc.reason}
{{kc.message}

---

原因是您分别循环使用

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>

元数据名称
地位
类型
理由
消息
{{kc.metadataName}
{{kc.status[i]}
{{kc.type[i]}
{{kc.reason[i]！=null？kc.reason[i]：'null'}
{{kc.message[i]！=null？kc.message[i]：'null'}

结果:

---

它是嵌套的json。在您的情况下，它将显示true，true，true，true。但我想要的方法就像我包含的第二个图像，所以请在您的问题中包含嵌套的

json

示例，以便我可以告诉您正确的添加的json文件示例。您还可以看到它是如何嵌套的，因为我在问题中也实现了c代码，所以您希望在一个

td

？@Farhad Hassan中显示所有

元数据
，结果与我在第二幅图中添加的结果完全相同。元数据名称和相关字段根据元数据名称我想使用我的一个非角度材质规则和角度材质一起工作，因此如果您不想使用它，请应用CSS并祝您好运，因为它非常乏味
<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>