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

Question

我在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呈现。

2. 显示方括号，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

Answer 1

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

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

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

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