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"}
]

在上一页中，我得到了我需要的语言（英语）（“英语”或“ duits”）。

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

这是我目前正在尝试的。所以在这里我在rect上有一个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>

因此，我需要在click函数中使用正确的语言。因此，如果我将其编码为“ clickOnArea（item.engels）”，则它可以工作，但我希望以某种方式使其动态（？）。

Answer 1

您可以像这样使用对象上的访问键，如果您还要添加更多语言，则可以作为将来的证明

clickOnArea(Item){
    let text = Item[this.taal];

    if(!text){
       text = ""; //set default
    }
    //use the value...
}

只需将item传递给HTML中的函数即可。

Answer 2

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

（click）=“ clickOnArea（taal ==='engels'？item.engels：item.duits）”

Answer 3

我认为这是最简单的。您可以通过[]获取该属性。

(click)="clickOnArea(item[taal])"

离子/角度ngFor和单击功能

3 个答案: