директива ngClass для использования с ngFor

Question

У меня есть несколько элементов списка, которые я отрисовываю с помощью директивы * ngFor. Тем не менее, некоторая часть текста списка элементов должна быть выделена жирным шрифтом в соответствии со спецификациями. Я пытался сделать это с помощью [ngClass] = "'strong'", когда strong - это класс css, мне нужно добавить часть текста. Когда я запустил приложение, в результате весь текст стал жирным. Ниже скриншот для вашего лучшего понимания.

Требуется сделать только долларовую часть жирным шрифтом. Я новичок в разработке angular. Любая помощь будет принята с благодарностью.

<ul>
      <li *ngFor="let text of income; let i = index" [ngClass]="'strong'">{{text.text}}</li>
    </ul>
income = [
    {text:'Your Annual Income:* $1,316,422'},
    {text:'Your Monthly Income: $109,702'}
  ];

Answer 1

Попробуйте с этим кодом:

<ul>
    <li *ngFor="let text of income">
        {{ text.split(':')[0] }}: <span class="strong">{{ text.split(':')[1] }}</span>
    </li>
</ul>

Answer 2

Пока вы уверены, что только о первой букве, вам не нужно Angular. Ни даже JavaScript. Есть чистое решение CSS.

.first-letter-bold::first-letter {
  font-weight: 900;
  font-size: 110%;
}

<ul>
  <li class="first-letter-bold">$1,316,422</li>
  <li class="first-letter-bold">$1,316,422</li>
</ul>

Answer 3

Я изменил только ту часть шаблона, которую вы предоставили.

С учетом данных из бэкэнда и при условии, что текст будет таким же, как вы дали, решение будет следующим:

Используя свойство [innerHTML] , вы можете постепенно разбивать строку на части, а когда вы достигнете части $, просто укажите класс <b> </b> как,

Вы можете разделить текстовую часть на часть, например, '<b>'+ text.text.split(' ')[3][0] + '</b>'.

Таким образом, вы можете сделать только $ жирным шрифтом и оставшийся текст таким, какой он есть.

<ul>
  <li *ngFor="let text of income; let i = index">
    <div [innerHTML]="text.text.split(' ')[3][0] ? text.text.split(' ')[0] + ' ' + text.text.split(' ')[1]+ ' ' + text.text.split(' ')[2] + ' ' + '<strong>'+ text.text.split(' ')[3][0] + '</strong>' + ' ' + text.text.split(' ')[3].substring(1) : text.text"></div>
    </li>
</ul>

Рабочий Stackblitz

Answer 4

Как показали другие ответы, вам нужно разделить текст. Я предпочел бы создать интерфейс, который моделирует различные части текста дохода.

export interface Income {
  amount: string;
  currencySymbol: string;
  text: string;
}

В вашем компоненте или услуге (где бы это ни имело смысл, когда дело касается повторного использования интерфейса), вы должны отобразить текст к интерфейсу. В этом и заключается сложность. Я покажу версию использования его в компоненте для простоты. На самом деле вы могли бы сделать это в своем сервисе для повторного использования.

incomes: Income[];

ngOnInit() {
  this.service.getIncomeTexts().subscribe((texts: string[]) => {
    this.incomes = texts.map(x => this.mapTextToIncome(x));
  });
}

private mapTextToIncome(text: string): Income {
  // this regex will match a string that ends with a dollar symbol 
  // followed by numbers or commas
  // You could extend the possible currency symbols if required
  const parts: string[] = /^(.+)(\$)([\d+,]+)$/.exec(text);
  return {
    amount: parts[3],
    currencySymbol: parts[2],
    text: parts[1]
  };
}

И тогда это становится тривиальным для использования в вашем HTML:

<ul *ngIf="incomes">
  <li *ngFor="let income of incomes">
    <span>{{income.text}}</span>
    <span class="strong">{{income.currencySymbol}}</span>
    <span>{{income.amount}}</span>
  </li>
</ul>

Я оставил сумму в виде строки в моем примере, но вы можете проанализировать его и рассматривать как число, чтобы вы могли применить свое собственное форматирование, если вы будете sh.

DEMO: https://stackblitz.com/edit/angular-do6joa

Regex demo: https://regex101.com/r/e4nLLO/2

Конечно, правильный ответ заключается в том, что ваш API должен возвращать данные в лучшем формате:)

Answer 5

Это потому, что {{text.text}} содержит полный текст. Вы должны разделить "li" следующим образом

<ul>
  <li *ngFor="let income of incomes; let i = index" [ngClass]="'strong'">{{income.text}}{{income.value</li>
</ul>


incomes = [
  {text:'Your Annual Income:*',
    value: '$1,316,422'},
  {text:'Your Monthly Income:'
    value: '$109,702'}
 ];