Pug tempalate/mixin 不分离插入的数据

Question

所以我仍在学习 node js 和哈巴狗以及我正在从事的项目我想将每个符号插入到它自己的行中，它有自己的元素，但它根本不起作用。它将所有东西都粘在一个 p 标签中，我不确定要查找什么来修复它

控制器

exports.getAllSymbols = async (req, res, next) => {
  const x = await axios.get(options.allStocksURL, options.allStockOptions);

  const stocks = await x.data.data[0];
  const stock = x.data.data[0].name;
  const symbol = stocks.symbol.toString();

  for (let y = 0; y <= x.data.data.length - 1; y++) {
    options.testData.push(x.data.data[y].symbol);
  }

  res.status(200).render("base", {
    StockName: stock,
    StockSym: options.testData,
  });
};

哈巴狗模板

html
    head
        meta(charset='UTF-8')
        meta(name='viewport', content='width=device-width', initial-scale='1.0')
        
        link(rel='stylesheet', href='/css/style.css')
        link(rel='shortcut icon', type='image/png', href='/img/favicon.png')
        link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
        title Dashboard | #{title}

    body

        mixin symbol(text)
            div
                p #{StockSym}


        // header 
        include _header

        .parameters
            p symbol 
            p RSI 
            p Stoch 
            p StochRSI 
            p MACD

        .syms
            //- p #{StockName}
            //- p #{StockSym}
            //- p #{test}
        +symbol()


            // FOOTER
        include _footer

        script(src="/scripts/script.js") 

Answer 1

在您的 Pug 模板中，您当前将所有股票代码呈现为您的符号混合中的单个段落元素 (p)，然后将其包含在您的 .syms div 中。要使用自己的 p 标签在新行上显示每个股票代码，您可以按如下方式修改代码混合：

 mixin symbol
  each sym in StockSym
    p= sym

这将遍历 StockSym 中的每个股票代码，并呈现一个带有代码文本的新 p 标签。然后，您可以在不传递任何参数的情况下在 Pug 模板中包含符号 mixin，如下所示：

.syms
  +symbol()

这将呈现一个 div，其中包含 StockSym 中每个股票代码的单独 p 标签。