Html 在Angular2中，如何根据ngFor循环中键的相似部分动态选择属性？

我在组件中有一个对象数组，如下所示：

fields = [
  { abcOptions: [ ... ], abcConfigs: [ ... ] },
  { defOptions: [ ... ], defConfigs: [ ... ] },
  { xyzOptions: [ ... ], xyzConfigs: [ ... ] }
]

在html中，我希望呈现所有这些对象以生成输入字段。我可以对上面的三个物体这样做三次：

<ng2-selectize [options]="abcOptions" [config]="abcConfigs"></ng2-selectize>

---

问题是我不确定如何为每次迭代动态地将属性插入代码中，因为键的名称不同。但是他们有一些最后的字母是相同的，我想可能有办法做到这一点。像

[options]=“field[*options]”

也许什么的，我真的不知道语法。请帮助。

在组件中使用此方法

getFromFields(field: any, type: string) {
 const value = Object.keys(field).find((key) => (new RegExp(type + '$')).test(key));
 if (value) {
  return field[value];
 }
}

像这样在模板中使用它

<ng2-selectize [options]="getFromFields(field, 'Options')" [config]="getFromFields(field, 'Configs')"></ng2-selectize>

---

在组件中使用此方法

getFromFields(field: any, type: string) {
 const value = Object.keys(field).find((key) => (new RegExp(type + '$')).test(key));
 if (value) {
  return field[value];
 }
}

像这样在模板中使用它

<ng2-selectize [options]="getFromFields(field, 'Options')" [config]="getFromFields(field, 'Configs')"></ng2-selectize>

您可以利用它来检索值数组。此解决方案假定在任何给定的

字段

对象中，选项始终位于索引

0

，配置始终位于索引

1

：

HTML

<div *ngFor="let field of fields">
  <ng2-selectize [options]="getOptions(field)" [config]="getConfig(field)"></ng2-selectize>
  <br />
</div>

这是正在实施的计划

但是，我建议，如果可能，只使用一致的属性名，以避免需要任何类型的方法来提取值。您可以向每个

字段

对象添加一个附加属性，以指定和利用

abc

/

xyz

标识/分组。使用该属性，您可以根据需要进行排序/映射/减少。这样，您就可以执行以下操作：

<div *ngFor="let field of fields">
  <ng2-selectize [options]="<!--option key here-->" [config]="<!--config key here-->"></ng2-selectize>
</div>

fields = [
  { id: 'abc', options: [ ... ], configs: [ ... ] }
];

<div *ngFor="let field of fields">
  <ng2-selectize [options]="field.options" [config]="field.configs"></ng2-selectize>
</div>

字段=[
{id:'abc'，选项：[……]，配置：[……]}
];

希望这有帮助

您可以利用来检索值数组。此解决方案假定在任何给定的

字段

对象中，选项始终位于索引

0

，配置始终位于索引

1

：

HTML

<div *ngFor="let field of fields">
  <ng2-selectize [options]="getOptions(field)" [config]="getConfig(field)"></ng2-selectize>
  <br />
</div>

这是正在实施的计划

但是，我建议，如果可能，只使用一致的属性名，以避免需要任何类型的方法来提取值。您可以向每个

字段

对象添加一个附加属性，以指定和利用

abc

/

xyz

标识/分组。使用该属性，您可以根据需要进行排序/映射/减少。这样，您就可以执行以下操作：

<div *ngFor="let field of fields">
  <ng2-selectize [options]="<!--option key here-->" [config]="<!--config key here-->"></ng2-selectize>
</div>

fields = [
  { id: 'abc', options: [ ... ], configs: [ ... ] }
];

<div *ngFor="let field of fields">
  <ng2-selectize [options]="field.options" [config]="field.configs"></ng2-selectize>
</div>

字段=[
{id:'abc'，选项：[……]，配置：[……]}
];

---

希望这有帮助

嗨。这与一开始就拼写关键名称有什么不同？如果我仍然必须将某些特定的内容（如“abc”）传递到参数中，则我无法迭代所有对象。抱歉，我正在匆忙更新，因此错过了您的

部分。我已经更新了我的答案。在我更新的答案中，每个

字段

对象中属性的索引并不重要。它将查找一个属性名，该属性名包含一个模式

*

（无论什么，比如'abc'），后跟第二个参数

type

。如果存在，它将返回要传递给模板的

@Input（）

property.Hi的值。这与一开始就拼写关键名称有什么不同？如果我仍然必须将某些特定的内容（如“abc”）传递到参数中，则我无法迭代所有对象。抱歉，我正在匆忙更新，因此错过了您的

部分。我已经更新了我的答案。在我更新的答案中，每个

字段

对象中属性的索引并不重要。它将查找一个属性名，该属性名包含一个模式

*

（无论什么，比如'abc'），后跟第二个参数

type

。如果存在，它将返回要传递给模板的

@Input（）

属性的值。