typescript - Angular - Şablon içinde nesneler dizisi içinde saklanan nesnenin değerlerine erişim

Aşağıdaki gibi tek bir sınıfım var:

export class SettingsTab {
  id: number;
  class: string;
  name: Object = {};
}

Ayrıca bunu basit bir diziye bölümlüyorum:

export const SETTINGSTABS: SettingsTab[] = [
  { id: 1, class: 'classOne', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] },
  { id: 2, class: 'classTwo', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] },
  { id: 3, class: 'classThree', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] }
];

Şimdi, şablonumda hangi dili kullandığıma bağlı olarak name nesnesinin belirli bir değerine erişmek istiyorum. Mevcut dil hakkında bilgiyi aşağıda gösterildiği gibi localStorage'dan alıyorum:

language = localStorage.getItem('currentLang') != null ? localStorage.getItem('currentLang').replace("'", "") : "pl";

Bunu aşağıda listelenen kod ile başarmayı başardım:

<ng-container *ngFor="let name of settingsTab.name">
  <ng-container *ngFor="let key of ObjectKeys(name)">
    <span *ngIf="key == language">{{ name[key] }}</span>
  </ng-container>
</ng-container>

NesneAnahtarları bileşenimde şöyle tanımlanmıştır:

ObjectKeys = Object.keys;

Ama benim sorum, yapmak istediğimi başarmanın daha kolay bir yolu var mı? İçlerinde *ngFor olan iki ng-component olmasını sevmiyorum. Ayrıca bunu en optimize şekilde başarmak isterim.

Cevap #1

İdeal olarak, name özelliği:

{ ..., name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] },

Bir nesne dizisi değil, bir nesne formatına sahip olur:

{ ..., name: {"pl": "Tekst po polsku", "en": "Text in english"} },

Sonra bunu şablonunuzda basitçe kullanabilirsiniz:

<span>{{ settingsTab.name[language] }}</span>

Bu, sabit zamanlı bir aramadır (sadece bir nesnedeki bir özelliği almak).

Şimdi, eğer name formatını değiştiremiyorsanız, bu iç içe ng-containerlar yerine bir yöntem kullanırdım:

export class MyComponent {
  ...
  lang(names: [any], language: string) {
    return (names.find(lang => lang[language]) || {})[language]
  }
  ...
}

Ve bunu şöyle kullan:

<span>{{ lang(settingsTab.name, language) }}</span>

Elbette, lang'i uygun gördüğünüz her şeyle adlandırabilirsiniz. Sadece, bu alternatifin O(n) karmaşıklığına sahip olduğunu unutmayın; çünkü find, name dizisini döngüyle gezmek zorunda kalıyor. Bu muhtemelen uygulamanızın performansını hiç etkilemeyecektir, ancak bilmeniz gerektiğini düşündüm. name'in mevcut formatında, burası için daha hızlı bir yol yok.

Demo: https://stackblitz.com/edit/angular-c5wzbk?file=src/app/app.component.ts

İlgili makaleler