javascript - Pug 表值未放在正确的列中

问题描述

我有一个简单的表格，我想展示它，但展示的内容似乎有点不对劲。我希望每个法院的 signCount 变量位于“Sign Count”列下，但由于某种原因，它出现在每个法院名称下的“Court Name”列下。似乎每个循环都搞砸了......谢谢！

court、court.users 和 collections 是如下所示的数组：

courts = 
[ { orgName: 'Court 1',
    sortNumber: 9,
    level: 2,
    createdAt: 2018-02-12T09:09:15.920Z,
    lastModify: null,
    _id: 5a8159bb65314c0407b17533,
    users: [ [Object], [Object] ],
    parentID: 5a74292665314c0407b0ea2b,
    __v: 0 },
  { orgName: 'Court 2',
    sortNumber: 1,
    level: 3,
    createdAt: 2018-03-06T06:02:12.820Z,
    lastModify: null,
    _id: 5a9e2ee42b8baf66accc7b4a,
    users: [ [Object], [Object] ],
    parentID: 5a8159bb65314c0407b17533,
    __v: 0 },
  { orgName: 'Court 3',
    sortNumber: 7,
    level: 3,
    createdAt: 2018-03-06T06:45:05.439Z,
    lastModify: 2018-04-01T11:51:19.969Z,
    _id: 5a9e38f12b8baf66accc7bd4,
    users: [ [Object] ],
    parentID: 5a8159bb65314c0407b17533,
    __v: 0 }];;

courts.users = [{ userName: '1100zs',
  displayName: 'Court 1',
  phone: '',
  memo: '',
  mobilePhone: '',
  isMaster: true }
{ userName: '1100dd',
  displayName: 'Court 1.1',
  phone: '',
  memo: '',
  mobilePhone: '',
  isMaster: false }];

collections = [{courtName: '51zs', signCount: 15}, {courtName: '54zs', signCount: 7}, {courtName: '45zs', signCount: 8}];

extends layout

block content
  h1 Courts
    table(id="courts" align='center')
      tr
        th Court Name
        th Level
        th Display Name
        th Users
        th Sign Count
      each court in courts 
        tr 
          td #{court.orgName}
          td #{court.level}
          if court.users
            if court.users.length >= 1
              td #{court.users[0].displayName}  
              td #{court.users[0].userName}
        each item in collections
          if court.users.length >= 1
            if item.courtName == court.users[0].userName
                td #{item.signCount}
            else
                td 0
    h2  #{signCount} / #{total}

html 看起来像这样：（抱歉格式不好。因为我是用 pug 编写的，所以我不得不手动缩进所有内容。）

<html>
    <head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title>Courts by region</title>
</head>
<body>
    <h1>Courts<table id="courts" align="center"> 
    <tbody>
        <tr>
            <th>Court Name</th>
            <th>Level</th>
            <th>Display Name</th>
            <th>Users</th>
            <th> Sign Count </th>
        </tr>
        <tr> 
            <td>Court 1</td>
            <td>2</td>
            <td>Court User[0]  </td>
            <td>1100zs</td>
        </tr>
        <tr>
            <th>9</th> <!-- This number should go under Sign Count... -->
        </tr>
        <tr> 
            <td>Court 2</td>
            <td>3</td>
            <td>Court User[0]  </td>
            <td>1101zs</td>
        </tr>
        <tr>
            <th>0</th>
        </tr>
        <tr> 
            <th>0</th> <!-- This number should go under Sign Count... -->
        </tr>
    </tbody>
    </table>
</h1>

<h2> 9 / 207</h2>
        <footer>
            <hr><p> © 2019 </p>
        </footer>
    </body>
</html>

标签： javascripthtmlpug

javascript - Pug 表值未放在正确的列中

问题描述

解决方案

推荐阅读