Angular Функция возврата переменной, заключенная в кавычки, отображается в виде текста вместо рендеринга / с использованием другой схемы, которая не ломается - PullRequest
Новая
       16

Angular Функция возврата переменной, заключенная в кавычки, отображается в виде текста вместо рендеринга / с использованием другой схемы, которая не ломается

0 голосов
/ 15 января 2020

У меня есть 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 из-за добавления еще одного тега в настройку flexbox.

Я пытался использовать вложенные селекторы с divs, uls, et c. Они не работают, потому что css ломается. (Опять же, если вы не можете придумать другое решение)

Решения: 1. Как я могу получить: return (this.roundHtmlStr); когда он передает его обратно в интерполяцию {{getRound Html (roundIndex)}}, чтобы не быть заключенным в ""; По сути, он переносит возвращаемое значение, и html фактически отображает текст, а не html рендеринг.

Показать скобки, где css может следовать схеме и правильно выровнять совпадения для каждого раунда, независимо от того, насколько велика или мала скобка 2, 4, 8, 16, 32, 64 ... et c. Проблема в 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

1 Ответ

0 голосов
/ 17 января 2020

Так что я придумаю другое решение.

  1. Мне пришлось сгладить вложенные селекторы и свалить все в один для компонента пакета, удалив вложенные селекторы из разбив css.

  2. Мне пришлось изменить структуру HTML на: div

Тогда просто совпадение с ol и li для одного совпадения, чтобы его можно было повторить для l oop, потому что каждый раунд зацикливается, и каждый раунд имеет от 2 до n степени совпадений / 2, поэтому в первом раунде для 32 человек - 16 матчей, во втором раунде - 8 и т. д.

...