如何翻译字符串然后在模板中对其进行切片

Question

我正在开发 Angular 应用程序，需要显示切片为特定长度的翻译字符串。我的主管更喜欢所有与视图相关的逻辑最好直接在视图（模板）中实现，而不需要修改组件（控制器）代码。

尝试在模板中链接翻译和切片管道，但它没有按预期工作： 这是完整的代码：

<span 
ng-if="vm.yaxis[vm.yaxis.length-1-yIndex].label.length > 10" 
class="y-label tooltipped" 
data-tooltip="{{vm.yaxis[vm.yaxis.length-1-yIndex].label | translate}}" 
data-position="bottom">
    {{(vm.yaxis[vm.yaxis.length-1-yIndex].label | translate) | slice: 0 : 8}}
    <span class="y-label-dots">...</span>
</span>

它实际上检查了 y 轴标签长度，如果长度大于 10，则标签应该被切片。但问题是这不会在界面中显示任何标签。它显示为空白。如果我进行切片和翻译，那么这将无法正确翻译，因为在 i18n 翻译文件中不包含该切片的字符串。因此我需要应用翻译然后切片。

Answer 1

你可以尝试使用 as 语法来使用 ngIf 吗？

<span 
ng-if="vm.yaxis[vm.yaxis.length-1-yIndex].label.length > 10" 
class="y-label tooltipped" 
data-tooltip="{{vm.yaxis[vm.yaxis.length-1-yIndex].label | translate}}" 
data-position="bottom">
    <span *ngIf="(vm.yaxis[vm.yaxis.length-1-yIndex].label | translate) as translated">
        {{translated | slice: 0 : 8}}
        <span class="y-label-dots">...</span>
    </span>
</span>