typescript - Ionic/angular ngFor ve tıklama fonksiyonu

Yakın zamanda Ionic ile çalışmaya başladım. Bu yüzden içinde bir tür 'sözlük' bulunan bir uygulama yapıyorum. Bir düğmeye bastığımda, bir ses dosyası çalıyor ve Hollandaca kelimenin İngilizce veya Almanca çevirisini veriyor. 'Opdracht1.json' adlı bir JSON dosyasındaki bir dizi ile çalışıyorum, içinde Hollandacadan İngilizce/Almancaya çevirileri olan değerler var. X ve Y dikdörtgen pozisyonları için ama bu önemli değil! Yani çıktı olarak İngilizce veya Almanca bir kelime almak istiyorum.

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

Önceki bir sayfadan, hangi dili (taal) almam gerektiğini anlıyorum ('engels' ya da 'duits').

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

İşte şu anda denediğim şey bu. Yani burada, 'audio' çalmak için tıklanabilir dikdörtgenler üzerinde bir for döngüm var. Tıklama fonksiyonunda, doğru öğe dilini almaya çalışıyorum.

<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>

Yani, tıklama fonksiyonunda doğru dili almam gerekiyor. Yani eğer bunu "clickOnArea(item.engels)" şeklinde kodlarsam çalışıyor, ama bunu bir şekilde dinamik yapmak istiyorum.

Cevap #1

Ternary operatörünü basitçe kullanabilirsiniz.

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

Cevap #2

Bu şekilde nesnedeki anahtara erişimi kullanabilirsiniz, daha fazla dil eklerseniz de geleceğe dönük olur

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

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

Sadece item'i HTML'deki fonksiyona geçir.