为啥我不能在 Angular ngFor 循环中设置我的第一个单词的样式？

Posted 2023-03-06

【中文标题】为啥我不能在 Angular ngFor 循环中设置我的第一个单词的样式？

【英文标题】：Why can't I style my first word within my Angular ngFor loop?为什么我不能在 Angular ngFor 循环中设置我的第一个单词的样式？

【发布时间】：2021-04-16 11:45:23

【问题描述】：

我目前正在尝试在我的 Angular ngFor 循环中设置字符串的第一个单词的样式。不知何故，类得到了应用，但不是我的 CSS 文件中的样式。内联样式也不起作用 - 为什么？

这是我要应用的 CSS：

#page-image-title-table .first-entry-word 
  font-weight: 500;

这是我将我的第一个单词包装到我上面的类的元素中的函数：

formatTableEntry(tableEntry: string): string 
  const tableEntryParts = tableEntry.split(' ');
  const firstWord       = tableEntryParts[0];

  tableEntryParts.shift();

  const restOfString = tableEntryParts.join(' ');

  return `<span class="first-entry-word">$firstWord</span> $restOfString`;

这是我的循环的 html：

<div id="page-image-title-table">
  <div class="page-image-title-table-row" *ngFor="let tableEntry of tableEntries">
    <span [innerHTML]="formatTableEntry(tableEntry)"></span>
  </div>
</div>

您可以在此处查看我的工作示例：

https://angular-ivy-g7ov5s.stackblitz.io

【问题讨论】：

请不要在没有任何描述的情况下投反对票。我添加了一些代码和一个工作示例。接下来需要什么？

您的工作示例不适合我。在 Chrome 中，它只在右上角显示一个旋转的蓝色圆圈，而在 Firefox 中，它只会说“正在启动开发服务器”超过一分钟，而没有到达任何地方。

不反对，但这已被多次回答，以至于最受欢迎的答案之一甚至是重复的：***.com/questions/44210786/…

【参考方案1】：

我在这里看到了多个问题。

将函数绑定到指令[innerHTML]="formatTableEntry(tableEntry)" 会导致默认更改检测策略出现性能问题。

使用 innerHTML 绑定在 Angular 中并不优雅。

font-weight: 500 是默认权重值。粗体等于 700。

也许对实际问题并不重要，但 Stackblitz 似乎不适用于我在 FF 和 Chrome 中。

解决方案

您可以使用快速管道将句子拆分为所需的格式。

split.pipe.ts

@Pipe(
  name: 'split', 
  pure: true
)
export class SplitPipe implements PipeTransform 
  transform(value: any, args?: any): any 
    if (!value) 
      return null;
    

    return value.reduce((acc, curr) => 
      const [first, ...rest] = curr.split(" ");
      acc.push( first: first, rest: rest.join(" ") );
      return acc;
    , []);
  

然后它可以与类似于keyvalue 管道的*ngFor 指令结合使用。

试试下面的

app.component.ts

@Component(
  selector: "my-app",
  template: `
    <div id="page-image-title-table">
      <div 
        class="page-image-title-table-row" 
        *ngFor="let tableEntry of (tableEntries | split)"
      >
        <span>
          <span class="first-entry-word"> tableEntry.first </span>
           tableEntry.rest 
        </span>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
)
export class AppComponent 
  tableEntries = [
    "First element of the array",
    "Second sample element of the array",
    "lorem ipsum dolor sit amet",
    "Quick brown fox jumps over the lazy dog"
  ];

app.component.css

#page-image-title-table .first-entry-word 
  font-weight: 700;

工作示例：Stackblitz

【讨论】：

效果很好（我的字体正常有 400，粗体有 500）。非常感谢您向我展示了处理此问题的方法。它应该如何工作。谢谢老哥！