时间戳

首页 > 解决方案 > 用引号括起来的角函数返回变量显示为文本而不是渲染/使用不破坏 css 的不同方案

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

问题描述

我在我的 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，因为它会由于在弹性框设置中添加另一个标签而破坏 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

标签： cssangularflexboxwrapperquotes

解决方案

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

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

  2. 我不得不将 HTML 的结构更改为：div

然后只匹配 ol 和 li 进行单场比赛，因此可以使用 for 循环重复，因为每一轮循环并且每一轮都有 2 的 n 次方 match/2 所以 32 人的第一轮有 16 场比赛，第二轮有8个等等。

推荐阅读