如何仅显示 Angular 页面中显示的字符串变量的前 n 个单词？

Question

我正在处理 Angular 应用程序，但遇到以下问题。

在我看来，我正在迭代一个对象列表，将它们呈现为“table”。在此 table 中，我有一列包含可能很长的文本值，我只需要显示前 10 个单词，但它不起作用。

我试过这样：

<div class="ion-padding-start ion-padding">
  <div class="ion-text-center">
    <ng-container>
      <ion-text>
        <h3>
          TEST
        </h3>
        </ion-text>

        <ion-list>
          <ion-grid>
            <ion-row *ngFor="let bid of artistAppliedBidList">
                    <ion-col>
                      <ion-thumbnail>
                        <img [src]="bid.imageUrl">
                      </ion-thumbnail>
                    </ion-col>
                    <ion-col>{{ bid.bidOwnerName }}</ion-col>
                    <ion-col>{{ bid.vicinity }}</ion-col>
                    <ion-col>{{ bid.description.split(" ").splice(0,10).join(" "); }}</ion-col>
                          
              </ion-row>
         
        </ion-grid>
        </ion-list>
    </ng-container>
  </div>
</div>

但是这一行：

<ion-col>{{ bid.description.split(" ").splice(0,10).join(" "); }}</ion-col>

在 Chrome 控制台中给我这个错误信息：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Binding expression cannot contain chained expression at the end of the expression [{{ bid.description.split(" ").splice(0,10).join(" "); }}] in ng:///ProfileArtistAppliedBidComponent/template.html@19:29 ("}}</ion-col>
                    <ion-col>{{ bid.vicinity }}</ion-col>
                    <ion-col>[ERROR ->]{{ bid.description.split(" ").splice(0,10).join(" "); }}</ion-col>
                          
       "): ng:///ProfileArtistAppliedBidComponent/template.html@19:29
Error: Template parse errors:
Parser Error: Binding expression cannot contain chained expression at the end of the expression [{{ bid.description.split(" ").splice(0,10).join(" "); }}] in ng:///ProfileArtistAppliedBidComponent/template.html@19:29 ("}}</ion-col>
                    <ion-col>{{ bid.vicinity }}</ion-col>
                    <ion-col>[ERROR ->]{{ bid.description.split(" ").splice(0,10).join(" "); }}</ion-col>
                          
       "): ng:///ProfileArtistAppliedBidComponent/template.html@19:29
    at syntaxError (compiler.js:2387)
    at htmlAstToRender3Ast (compiler.js:15299)
    at parseTemplate (compiler.js:18076)
    at CompilerFacadeImpl.compileComponent (compiler.js:18932)
    at Function.get (core.js:39843)
    at getComponentDef (core.js:2170)
    at core.js:39571
    at Array.forEach (<anonymous>)
    at setScopeOnDeclaredComponents (core.js:39561)
    at flushModuleScopingQueueAsMuchAsPossible (core.js:39143)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

我只能显示前 10 个字符，用;

替换前面的表达式

bid.description.substring(0,8);

但这样我会截断最后一个词，我不会。

如何实现所需的行为？如何正确显示前10个字？

Answer 1

避免在属性绑定和插值中尝试运行函数。在默认更改检测策略的情况下，它们将为每个 CD 周期运行，并且可能会影响性能。
您可以改用 Angular slice 管道。

<ion-col>{{ bid.description | slice:0:10 }}...</ion-col>

更新：获取第 'n' 个单词

您可以编写一个快速管道，其中包含对 return 特定字数的字符串操作。

此外，您还可以使用安全导航运算符 ?. 来确保属性在尝试对其调用函数之前已定义。

切片-words.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "sliceWords" })
export class SliceWordsPipe implements PipeTransform {
  transform(value: string, start: number, end?: number): string {
    if (value == null) return null;

    return value
      .split(" ")
      .splice(start, end)
      .join(" ");
  }
}

模板

<ion-col>{{ bid?.description | sliceWords:0:10 }}...</ion-col>

工作示例：Stackblitz

如何仅显示 Angular 页面中显示的字符串变量的前 n 个单词？

How can I show only the first n words from a string variable showed in my Angular page?

string-interpolation

angular

更新：获取第 'n' 个单词