angular - ionic /Angular ngFor 和点击功能

Question

我最近开始使用 Ionic。所以我正在制作一个带有某种“字典”的应用程序。如果我按下按钮，音频文件会播放荷兰语单词的英语或德语翻译。我正在使用一个名为“Opdracht1.json”的 JSON 文件中的数组，其中包含从荷兰语到英语/德语的翻译值。 X&Y 用于矩形位置，但这并不重要!所以作为输出我想得到一个英语或德语单词

[
    {"x": "365", "y": "12", "string": "steiger", "engels": "Jetty", "duits": "Der Steiger"},
    {"x": "459", "y": "65", "string": "kanaal", "engels": "Canal", "duits": "Der Kanal"},
    {"x": "117", "y": "210", "string": "Westkolk", "engels": "West lock", "duits": "Die Westkammer"},
    {"x": "503", "y": "151", "string": "Sluizencomplex", "engels": "Lock complex", "duits": "Der Schleussengruppe"},
    {"x": "488", "y": "249", "string": "wachthaven", "engels": "Ley by berth", "duits": "Der Wartehafen"},
    {"x": "510", "y": "300", "string": "autosteiger", "engels": "Car jetty", "duits": "Der Autosteiger"},
    {"x": "581", "y": "350", "string": "Zwaaikom", "engels": "Turning basin", "duits": "Der Wendeplatz"},
    {"x": "505", "y": "652", "string": "Scheidingsboei", "engels": "Separation buoy", "duits": "Die Trennungsboje"},
    {"x": "705", "y": "550", "string": "radartoren", "engels": "radartower", "duits": "Der Radartum"},
    {"x": "931", "y": "365", "string": "Kilometerraai", "engels": "Kilometer marker", "duits": "Der Stromkilometer"},
    {"x": "887", "y": "312", "string": "schip", "engels": "Vessel", "duits": "Das Schiff"},
    {"x": "960", "y": "172", "string": "tunnel", "engels": "Tunnel", "duits": "Der Tunnel"}
]

从上一页，我得到了我需要的语言 (taal)('engels' 或 'duits')。

// Get taal van de vorige pagina en zet deze in taal
this.taal = navParams.get('taal');
console.log(this.taal);

这就是我目前正在尝试的。所以我在矩形上有一个 for 循环，用于播放“音频”的可点击矩形。在点击功能中，我是否试图获得正确的项目语言。

<svg viewBox="0 0 1280 720" *ngIf="id === 'SamenwerkenOpDeCorridor'">
  <image width="1280" height="720" xlink:href="assets/imgs/maps/SamenwerkenOpDeCorridor/opdracht1.svg">
  </image>

  <rect *ngFor="let item of coordinaten" [attr.x]="item.x" [attr.y]="item.y" width="200" height="45" fill="#fff" opacity="0" (click)="clickOnArea(item.taal)"
  />

</svg>

因此，我需要在点击功能中获得正确的语言。因此，如果我将其编码为“clickOnArea(item.engels)”，它就可以工作，但我希望它以某种方式动态(？)。

Answer 1

您可以简单地使用三元运算符。

(click)= "clickOnArea(taal === 'engels'? item.engels : item.duits)"