css - 用引号包裹的 Angular 函数返回变量显示为文本而不是渲染/使用不破坏 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、uls 等一起使用。它们不起作用，因为 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

Answer 1

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

1. 我不得不展平嵌套选择器并将所有内容转储到一个包组件中，以便从破坏 css 中移除嵌套选择器。

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

然后只用 ol 和 li 进行一场比赛，这样它就可以用 for 循环重复，因为每一轮循环，每一轮都有 2 的 n 次方的比赛/2 所以 32 人的第一轮有 16 场比赛第二轮有 8 等等。