将两个动态变量合并为一个以输出单个结果-打字稿

Question

我尝试将两个变量合并或合并为一个新变量。

我的代码段如下所示：

在TS（组件）文件中

this.setTextLang='_pt';

在HTML

<div *ngFor="let el of exlists"> <ion-label> {{el.menu_name+(setTextLang) }} </ion-label> </div>

但是，这当然行不通。

当前输出：（它连接输出-这是我所不希望的）

 USA_pt
 Nepal_pt

Expecting output

编译器应将{{el.menu_name+(setTextLang) }}理解为{{el.menu_name_pt }}并在el.menu_name_pt内给出*ngFor的值：

有人对我有其他解决方案吗？提前非常感谢！ 如果我的问题不清楚，请告诉我

Answer 1

好的，我想我现在看到了您的问题。

正确地@@ Simonare指出的括号内的属性访问将是自然的解决方案。但是，由于Angular模板语法的限制，因此不适用于此用例。在“ {{}}”模板语法中，您无法对方括号访问器中的字符串变量求值。

基本上，您无法执行{{el['menuName' + setTextLang]}}，因为无法在该范围内评估'setTextLang'。

因此，一种可能的解决方案是在模型中使用一个辅助方法来为您进行访问：

getProperty(obj: any, property: string): string {
  return obj[property + this.setTextLang];
}

然后在您的模板中：

<div *ngFor="let el of exlists">
  <div>{{getProperty(el, 'menuName')}}</div>  
</div>

这是一个让人眼花demo乱的演示：https://stackblitz.com/edit/angular-an2xiz