Использование ngFor для создания различных типов элементов - PullRequest
Новая
       12

Использование ngFor для создания различных типов элементов

0 голосов
/ 19 февраля 2019

Я перебираю массив строк (называемых словами) и хочу создать элементы span для каждого слова и элементы br для символов конца строки (\ n), используя Angular / Typescript.У меня работает директива ngFor: 

<div id = documentContents *ngIf="showDocument">
    <span *ngFor="let word of words" >
        {{word}}
    </span>
</div>

В настоящее время она создает интервалы из всего, даже из элементов br в массиве.Примечание: при разборе документа я создаю элементы br из символов конца строки.Не замужем за этим решением, просто показалось хорошей идеей.Логически я хочу сделать что-то вроде: 

if(word != "<br/>") {
    <span> {{word}} </span>
}
else {
    create a <br/> element
}

, где все элементы span и br добавляются к содержащему div и сохраняется исходный формат источника (насколько это возможно)

НоЯ не уверен, как реализовать часть ngIf.Я экспериментировал с размещением директивы ngFor на элементе div (docContents), но затем он генерирует вице-элементы div (как и следовало ожидать).Я написал что-то похожее, используя javascript, и это был просто вопрос document.append (span или br element).Это, вероятно, простая вещь, но она ускользает от меня.Цени любую помощь.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Просто альтернатива ответу @ jo_va, который IMO немного легче читать: 

<div id="documentContents" *ngIf="showDocument">
  <ng-container *ngFor="let word of words">
    <span *ngIf="word !== '\n'">{{word}}</span>
    <br *ngIf="word === '\n'">
  </ng-container>
</div>

Это просто отображает интервал, если слово что-то, кроме новой строки, и <br> в противном случае.

Единственным недостатком является повторение условия, которое можно исправить, добавив простой компонент isNewline() к компоненту и используя вместо него !isNewLine() / isNewLine().

Демонстрация: https://stackblitz.com/edit/angular-prkeyy

0 голосов
/ 19 февраля 2019

Поместите ваш *ngFor в <ng-container>, он не добавит дополнительный элемент в DOM во время выполнения.

И поместите внутренний *ngIf со ссылкой шаблона на <ng-template>для обработки остальной части: 

<div id = documentContents *ngIf="showDocument">
    <ng-container *ngFor="let word of words" >
        <span *ngIf="word !== '\n'; else br">{{ word }}</span>
        <ng-template #br><br /></ng-template>
    </ng-container>
</div>

Вот статья на <ng-container>, если вам нужна дополнительная информация.

...