Ionic 4模板中如何从JSON字符串获取变量？

嘿，我懂你现在的困扰！你数据库里存的是JSON格式的字符串，不是已经解析好的JavaScript对象，所以直接用.comment_by_id肯定拿不到值——毕竟字符串本身没有这个属性嘛。

给你两种靠谱的解决办法：

方法一：在组件里提前解析（推荐） #

拿到接口返回的数据后，先把每个comment字符串转成JSON对象，这样模板里就能直接用属性访问了。比如在你获取feed数据的地方加一段处理逻辑：

// 假设你是通过服务获取数据的
this.feedService.getFeedData().subscribe(data => {
  this.feed = data;
  // 把每个comment字符串解析成JSON对象
  if (this.feed[0]?.meta?.comments) {
    this.feed[0].meta.comments = this.feed[0].meta.comments.map(commentStr => {
      // 这里加个try-catch避免解析失败报错
      try {
        return JSON.parse(commentStr);
      } catch (err) {
        console.warn('解析comment失败:', err);
        return {};
      }
    });
  }
});

处理完之后，你的模板代码就可以正常用{{comment.comment_by_id}}、{{comment.comment_by}}这些属性了，不用改模板里的循环逻辑~

方法二：用自定义管道在模板里解析（应急用） #

如果不想改组件逻辑，也可以写个Angular管道来帮你在模板里解析JSON字符串：

1. 先生成管道文件：

ng generate pipe parseJson

2. 打开生成的parse-json.pipe.ts，替换成下面的代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'parseJson'
})
export class ParseJsonPipe implements PipeTransform {
  transform(value: string): any {
    try {
      return JSON.parse(value);
    } catch (error) {
      console.error('JSON解析失败:', error);
      return value;
    }
  }
}

3. 然后在模板里用这个管道：

<ion-card *ngFor="let commentStr of feed[0].meta.comments">
  <div *ngIf="(commentStr | parseJson).comment_by" class="card-title"></div>
  <div class="card-subtitle">{{(commentStr | parseJson).comment_by_id}}</div>
</ion-card>

不过这种方法我不太推荐，因为模板里尽量少放业务逻辑，后续维护起来麻烦，还是方法一更稳妥。

总结一下：核心问题就是你的comment是序列化后的JSON字符串，必须先通过JSON.parse()转成JS对象，才能用.访问里面的属性~

内容的提问来源于stack exchange，提问作者Jeet Tupe