與 ngFor 一起使用的 ngClass 指令

Question

我有一些列表元素，我使用 *ngFor 指令渲染它們。 但是，根據規范，列表項文本的某些部分應為粗體。 我試圖用 [ngClass]="'strong'" 來做到這一點，當 strong 是我需要在文本上添加一些部分的 css 類時。 當我運行應用程序時，結果是整個文本變成粗體。 下面是屏幕截圖，以便您更好地理解。

要求是僅使美元部分加粗。 我是角度開發的新手。 任何幫助將不勝感激。

<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

這是因為 {{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'}
 ];

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>

在我的示例中，我將數量作為字符串保留，但您可能想要解析它並將其視為數字，以便您可以根據需要應用自己的格式。

演示： https : //stackblitz.com/edit/angular-do6joa

正則表達式演示： https : //regex101.com/r/e4nLLO/2

當然，正確的答案是您的 API 應該以更好的格式返回數據:)

Answer 5

我只修改了您提供的模板部分。

考慮到后端的數據，並假設文本會像您給出的那樣，解決方案如下..

使用[innerHTML]屬性，您可以逐步拆分字符串，當您到達$部分時，只需提供 class <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>

工作堆棧閃電戰