jquery - 响应后，我需要小屏幕的表头，但它不起作用，它重复表头。因为我已经使用for循环来打印标题

Question

响应小屏幕后我需要一个表格标题。所以，我使用了媒体查询。有几行，单击每行后将出现 diff-2 表。因为不同的表有不同的表头。并通过循环打印标题。但问题是，单击后第一行有多少个标题。每一行都会重复。例如，对于第一行，只有三个标题。这三个标题在所有其他行中重复，所以请帮助我提前谢谢您。

    <table class="grid-table">
        <thead>
            <tr>
                <td *ngfor="let item of items.value">
                    {{item.header}}
                </td
           </tr>
    </thead>
    <tbody>
        <tr>
            <td *ngfor="let item of items.value">
                 {{item.data}}
            </td
        </tr>
    </tbody>
    </table

我的CSS

    grid-table {
    td:nth-of-type(1):before {
             content: "Groceries  (Monthly):";
          }
          td:nth-of-type(2):before {
             content: "Milk  (Monthly):";
          }
          td:nth-of-type(3):before {
             content: "Cafeteria  (Monthly):";
          }
          td:nth-of-type(4):before {
             content: "Fuel  (Monthly):";
          }
          td:nth-of-type(5):before {
              content: "Maintenance  (Annual):";
          }
          td:nth-of-type(6):before {
              content: "Local Commuting  (Monthly):";
          }

        and so on...

    }

Answer 1

我请求以正确可读的方式提出问题，以便这里的任何人都可以更好地帮助您。我从您的问题中了解到，所有标题的列都会重复。

当您重复列而不是行时，就会发生这种情况。 *ngFor 的工作方式是，它将重复您应用它的元素。

也许你可以这样做:-

<table class="grid-table">
    <thead>
        <tr *ngFor="let item of items.value">
            <th>{{ item.header }}</th>
       </tr>
</thead>
<tbody>
    <tr *ngFor="let item of items.value">
        <td>{{ item.data }}</td>
    </tr>
</tbody>
</table>

此外，请确保使用大写“F”正确提及 for *ngFor并请在您的 HTML 中使用正确的语义。我在上面的代码中使用了它:<th>而不是<td>在 <thead>并关闭 <table>正确标记。

希望这对您有帮助。干杯!