Angular Pipe：将字符串转换为Json并获取成员值答案

【问题标题】：Angular Pipe: Convert string into Json and get member valueAngular Pipe：将字符串转换为Json并获取成员值
【发布时间】：2021-06-02 07:37:56
【问题描述】：

是否有一个 Angular 管道接受一个字符串文本，并让用户获得一个实际值？

String: {"ProductId": "1234", "ProductName": "Computer"}

预期管道：

(item | pipe).productName 
===> results in 'Computer'

(item | pipe).productId
===> results in 1234

资源：

以下管道将对象转换为 json。 https://angular.io/api/common/JsonPipe

我需要转换字符串，并获取一个成员值

【问题讨论】：

stackoverflow.com/questions/37308420/…
我还没有见过这样的管道，但如果你愿意通过它，你可以自己制作
angular.io/api/common/KeyValuePipe

标签： angular typescript angular-pipe angular11

【解决方案1】：

我没有见过像你说的那样的管道，但如果你自己做的话，它可能会是这样的......：

创建了这个并对其进行了测试...使用您提供的描述数据效果非常好。

@Pipe({
  name: 'jsonParse'
})
export class JsonParsePipe implements PipeTransform {

  transform(value: string, ...args: unknown[]): any {
    return JSON.parse(value);
  }

}

在其中一个组件中，我将其定义为组件类的成员：

  data = JSON.stringify({ ProductId: '1234', ProductName: 'Computer' });

并且有这样的 HTML：

<div>{{ (data| jsonParse).ProductId }}</div>

我很确定你可以通过一些重载来增加它的趣味性，以便为它提供更多功能以供将来使用...

【讨论】：

实际上正在尝试，但是这给了我语法错误， (item | jsonParse).productName ，未定义标识符“productName”。 'string' 不包含这样的成员
ProductName 是您在描述中的字段，而不是 productName...lool
是的，两种方法都试过了，(item | jsonParse).ProductName 也不起作用
很有趣，让我尝试一下，谢谢你……稍后会回复
太棒了，为了让它更安全，我们应该把 unknown 改为 string 吗？和任何串？转换（值：字符串，...args：字符串[]）：字符串

【解决方案2】：

您可以创建一个像 Ashwyn 这样的自定义管道，或者只是在您的组件中创建一个函数来做同样的事情

Stackblitz

组件.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  str = '{"ProductId": "1234", "ProductName": "Computer"}';

  parseJson(str: string): any {
    return JSON.parse(str);
  }
}

模板.Html

<div>{{parseJson(str).ProductName}}</div>

我会说，如果您认为您需要在整个应用程序中使用类似的功能，请制作一个管道。如果这是一次性的，只需在组件内创建一个函数即可。

【讨论】：

管道不是更好吗，因为它更快？这就是我想要使用的东西，而不是功能？
你必须做一些基准测试来测量速度，但我非常怀疑是否有任何明显的差异（如果有的话）。管道的主要驱动力是封装复杂性和可重用性。您所追求的功能非常微不足道（最多单行）。在我看来，我会在上游进行这种类型的数据清理/格式化，而不是尝试通过创建一种解决方法来创建您不使用的格式在您的模板中工作。例如，如果这是从 HTTP 调用返回的，则使用 .pipe 或其他东西将 JSON 格式化为响应中的对象。

【解决方案3】：

这也可以：

打字稿：

export class ToJsonPipe implements PipeTransform {
  transform(value: string): any {
    try {
      return JSON.parse(value);
    } catch {
      return null;
    }
  }
}

HTML：

{{ (item?.request | toJson)?.ProductName }}

【讨论】：