Question

我需要通过字符串键来解析对象，就像AngualarJS $ parse sevice一样。我有一个对象

message = {
  text: 'msome text',
  userFrom: {
    name: 'Alex'
  }
}

我有一个字符串＆＃34; userFrom.name＆＃34;

如何通过使用一些Angular 4服务和＆＃34; userFrom.name＆＃34;来获取message.userFrom.name值。字符串？

在AngularJS中，可以这样做：

$parse("userFrom.name")(message) === 'Alex';

Answer 1

使用如下对象中的属性声明一个接口，

export interface IMessage{
  text:string;
  userFrom:{
    name:string;
  }
}

然后您可以将对象解析为

(<IMessage>this.message).userFrom.name; // gives Alex

LIVE DEMO

Answer 2

我不认为新的Angular中有这样的服务，但你可以使用任何标准的JS lib来做它。

与NPM上的object-path一样

使用npm install --save object-path

安装lib

使用npm install --save-dev @types/object-path

安装Typescript输入法

然后在你的代码中

import * as objectPath from 'object-path'

const message = {
  text: 'msome text',
  userFrom: {
    name: 'Alex'
  }
}

objectPath.get(message, "userFrom.name") === 'Alex'

Answer 3

如果您使用的是ngx-datatable，则可以导入getterForProp

import { getterForProp } from "@swimlane/ngx-datatable/release/utils";

然后您可以创建如下函数：

tryToGetValue(obj: any, propName: string) {

    if (!obj || !propName) {
        return null;
    }

    let valueGetter = getterForProp(propName);
    let parsedValue = valueGetter(obj, propName);

    if (!parsedValue) {
        return null;
    }
    return parsedValue;
}

您可以在here中找到实现，也可以只复制项目中的函数并调用getterForProp。 getterForProp将根据您传递给函数的字符串返回三个函数之一。那么您需要调用该函数并再次传递对象和字符串。它将为您完成工作。

如何在Angular 4中按字符串解析对象

3 个答案: