Angular ngFor模板中user.text.length输出值不符合预期的问题咨询

嘿，你之所以看到length输出4，是因为**user.text是个数组，不是字符串**！你示例里的user.text有4个元素（["johnd dskjsd", "mark kdsdlk", "joe sldk", "john sdkds"]），所以user.text.length获取的是数组的元素个数，也就是4，完全不是你想要的所有字符的总长度~

给你两种实用的解决办法，按需选：

方式1：组件里处理逻辑（推荐，符合Angular最佳实践） #

尽量别把复杂计算塞在模板里，在组件的.ts文件里写个方法来计算总长度：

// 你的组件类中
calculateTotalCharLength(user: any): number {
  // 遍历数组，把每个元素的字符长度加起来
  return user.text.reduce((totalLength, item) => totalLength + item.length, 0);
}

然后在模板里直接调用这个方法：

<!-- 先处理文本显示逻辑（顺便修正下你原来的slice问题） -->
{{ user.text.length > 1 ? (user.text[0] | slice:0:1) + '...' : user.text.join(' ') }}
<!-- 显示总字符长度 -->
{{ calculateTotalCharLength(user) }}

⚠️ 顺便提一句：你原来的user.text | slice:0:1是对数组做slice，拿到的是数组第一个完整元素，要是想截取第一个元素的前N个字符，得写成user.text[0] | slice:0:1哦！

方式2：直接在模板里计算（应急用，不推荐长期这么搞） #

如果不想改组件代码，也可以在模板里直接用数组的reduce方法计算：

{{ user.text.length > 1 ? (user.text[0] | slice:0:1) + '...' : user.text.join(' ') }}
{{ user.text.reduce((total, item) => total + item.length, 0) }}

内容的提问来源于stack exchange，提问作者puwot