如何在箭头函数中的 Angular 中使用输入发送的对象 属性 （比第一层更深）？

Question

我正在使用 angular 7 并尝试在子组件中做一些事情：使用输入 属性 可以在对象的第一层或更深的层次。

我的子组件有这段代码：

if (this.values.filter(obj => obj[this.matchPropertyName] === $event[i].id).length === 0) {
  ...
}

其中 this.matchPropertyName 是我的输入（可以是 'id'、'myProperty.id'、...）

对于单个级别 (obj.id)，此代码有效。但是，有时我需要从更深层次（obj.myProperty.id）使用，但它不起作用。 我怎样才能做到这一点？

如果不够清楚，请告诉我。

我正在使用 angular 7 和打字稿 3.2.4

Answer 1

我认为没有内置解决方案，但您可以使用简单的 split 和 reduce。例如：

const value = this.matchPropertyName.split('.').reduce((pre, curr) => pre[curr], obj);

当 this.matchPropertyName="myProperty.id"

时，

会给出 obj.myProperty.id 的值

Stackblitz

所以在你的情况下，你可以像这样使用它：

const theValue = this.matchPropertyName.split('.').reduce((pre, curr) => pre[curr], obj);
if (this.values.filter(obj => theValue === $event[i].id).length === 0) {
  ...
}

OP 的最终结果：

myEventListener($event) {
   if (this.values.filter(obj => this.resolveProperty(obj) === $event[i].id).length === 0) { 
      ... 
   }
}  
  
resolveProperty(obj) {
   return this.matchPropertyName.split('.').reduce((pre, curr) => pre[curr], obj);   
}