Question

我有一个课程如下：

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

我也把它模仿成简单的数组：

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

现在我想在我的模板中访问name对象的某些值，具体取决于我当前使用的语言。我从localStorage获取有关当前语言的信息，如下所示：

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

我设法通过下面列出的代码实现它：

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

ObjectKeys在我的组件中定义为：

ObjectKeys = Object.keys;

但我的问题是，有什么最简单的方法可以实现我想做的事情吗？不喜欢两个含有* ngFor的ng组件。也希望以最优化的方式实现它。

Answer 1

理想情况下，属性name：

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

格式不是对象数组，而是对象：

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

然后你可以在你的模板中使用：

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

这是一个恒定时间查找（只是获取对象中的属性）。

现在，如果您无法更改name的格式，我会使用方法而不是那些嵌套的ng-container：

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

并使用它：

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

当然，无论你认为合适，都可以致电lang。注意这个替代方案具有O（n）复杂性，因为find必须迭代name数组。这根本不会影响你的应用程序的性能，但我认为你应该知道。在name的当前格式中，没有更快捷的方法。

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

Angular - 访问存储在模板内对象数组中的对象的值

1 个答案: