根据 angular 中的参数传递翻译后的值

Question

我有以下翻译

  "SIGNAL":{
    "0": "Initial state, unset state",
    "1": "Emergency",
    "2": "Dangerous state",
    "3": "Attention status, processing in progress",
    "4": "Attention",
    "5": "Normal status processing in progress",
    "6": "Normal status"
  },

每个数字都是来自服务器的错误代码。

我有一个显示错误的组件

export class DroneSignalLedComponent implements OnInit {
  @Input() signal: number;
  @Input() status: string;
  constructor() { }

  ngOnInit() {
  }

}

我想在状态输入中将翻译传递给此组件。

这是绑定

<app-drone-signal-led [signal]="uav?.signal || 0" [status]="{{ 'DRONE.STATUS.SIGNAL.'+uav?.signal | translate }}"></app-drone-signal-led>

问题是，我找不到合适的方法在绑定中连接我的值。（因为还有翻译的{{}}）

现在我有

compiler.js:2430 Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{ 'DRONE.STATUS.SIGNAL.'+uav?.signal | translate }}]

uav?.signal 是一个从 0 到 6 的数字。

我想要的结果是，选择这样的东西

Answer 1

{{}} 在输入中不是必需的，因此删除这些应该可以解决您的问题

  <app-drone-signal-led 
    [signal]="uav?.signal || 0" 
    [status]="('DRONE.STATUS.SIGNAL.'+(uav?.signal || 0)) | translate">
  </app-drone-signal-led>

Answer 2

继续 Crocsx 的回答：

{{}} are not required in inputs, so removing those should solve your issue

因为在你的信号对象中，键只有 0 1 2 & 3 所以你不能附加 'DRONE.STATUS.SIGNAL.' 来翻译工作，你只需要传递这些数字来分别翻译管道，如：

<app-drone-signal-led 
    [signal]="uav?.signal || 0" 
    [status]="'DRONE.STATUS.SIGNAL.'+((uav?.signal || 0) | translate) ">
</app-drone-signal-led>

根据 angular 中的参数传递翻译后的值

pass translated value based on a parameter in angular

angular

string-interpolation

ngx-translate