用引号引起来的角函数返回变量显示为文本,而不是渲染/使用不破坏css的其他方案

问题描述 投票:0回答:1

我在Angular模板中有:

<ul>
{{ getRoundHtml(roundIndex) }}
</ul>

这将在我的组件中调用一个函数:

  getRoundHtml (indexRound){
    this.roundHtmlStr = '';
    console.log("INDEXR:", indexR);
    for (let i = 0; i < this.entries/Math.pow(2,indexRound); i++){
    this.roundHtmlStr = this.roundHtmlStr + `
         <li class="spacer">&nbsp;</li>\n 
         <li class="game game-top winner">Creighton <span>50</span></li>\n
         <li class="game game-spacer">&nbsp;</li>\n
         <li class="game game-bottom">Harvard <span>40</span></li>\n
         <li class="spacer">&nbsp;</li>\n
         `;
    }
    console.log("HTML:", this.roundHtmlStr.toString());
    return(this.roundHtmlStr);
  }

因为我不想添加另一个选择器或* ngFor,因为由于在flexbox设置中添加了另一个标签,它破坏了CSS。

我曾尝试将嵌套选择器与div,ul等一起使用。它们不起作用,因为css会中断。 (同样,除非您可以提出其他解决方案)

解决方案:1.如何获取:return(this.roundHtmlStr);当它传递回插值{{getRoundHtml(roundIndex)}}时不包装在“”中;它基本上是包装返回值,而html实际上是显示文本,而不是html呈现。

  1. 显示方括号,css可以遵循该方案,并在每一轮中正确对齐匹配项,无论该方括号的大小是2、4、8、16、32、64 ...等。Angular中的问题是css无法遵循flexbox增长规则,因为选择器标签进入了进程的中间并破坏了css。
Round 1          Round 2 (small 4 team bracket)

Duke 79
-----------
           | Duke 76
           ----------
           |        |
-----------         |
UNC  72             |   ND (Winner)
                    |-----------
                    |
Virginia 79         |
-----------         |
           | ND 91  | 
           ----------
           |
-----------
ND  72
css angular flexbox wrapper quotes
1个回答
0
投票

所以我想出了一个不同的解决方案。

  1. 我不得不拼合嵌套的选择器,并将所有内容都转储到一个包组件中,以免嵌套选择器破坏CSS。

  2. 我必须将HTML的结构更改为:div

然后仅使用ol和li进行一次匹配,因此可以使用for循环重复此操作,因为每个回合循环且每个回合具有2到2的n次幂/ 2,因此32人的第一回合具有16个匹配项,第二轮有8,依此类推。

热门问题
推荐问题
最新问题