离子/角度ngFor和点击功能答案

【问题标题】：Ionic / angular ngFor and click function离子/角度ngFor和点击功能
【发布时间】：2018-08-06 10:45:14
【问题描述】：

我最近开始玩 Ionic。所以我正在制作一个带有某种“字典”的应用程序。如果我按下按钮，音频文件会播放荷兰语单词的英语或德语翻译。我正在使用名为“Opdracht1.json”的 JSON 文件中的一个数组，其中包含从荷兰语到 engels/german 的翻译值。 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)”，它可以工作，但我希望它是动态的（？）以某种方式。

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以像这样使用对象上的访问密钥，如果您也添加更多语言，未来的证明

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

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

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

【讨论】：

【解决方案3】：

我认为这是最简单的。您可以通过[]获得该房产。

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

【讨论】：