javascript - 如何在箭头函数内部的 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 和 typescript 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);   
}