1

我有一些列表元素，我正在使用 *ngFor 指令进行渲染。但是，根据规范，列表项文本的某些部分应为粗体。我试图用 [ngClass]="'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'}
  ];
4

5 回答 5

3

试试这个代码：

<ul>
    <li *ngFor="let text of income">
        {{ text.split(':')[0] }}: <span class="strong">{{ text.split(':')[1] }}</span>
    </li>
</ul>
于 2020-02-20T12:56:21.653 回答
1

只要你确定它只是关于第一个字母，你就不需要 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>

于 2020-02-20T13:00:03.417 回答
0

这是因为 {{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'}
 ];
于 2020-02-20T12:55:10.860 回答
0

正如其他答案所确定的那样，您需要拆分文本。我对此的偏好是在模拟收入文本的不同部分的界面中创建。

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 应该以更好的格式返回数据 :)

于 2020-02-20T13:16:32.973 回答
0

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

考虑到来自后端的数据，并假设文本会像你给出的那样，解决方案如下..

使用[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>

工作堆栈闪电战

于 2020-02-20T13:31:44.190 回答