这个问题很常见——json pipe的设计初衷就是把JavaScript对象序列化为标准的JSON字符串，所以自带大括号{}和双引号""是它的预期行为。要去掉这些符号，不用再依赖json pipe，推荐下面几种方案：

方案1：直接访问固定属性（适用于结构明确的对象） #

如果你的address.value结构是固定的（比如始终包含State和City），可以直接取出属性值拼接，完全不用json pipe：

<div class="card-text mb-1" *ngFor="let address of addresses | keyvalue">
  <p>Address: {{address.value.State | titlecase}}, {{address.value.City | titlecase}}</p>
</div>

这样页面会直接显示：Address: Rajasthan, Jaipur，干净利落。

方案2：遍历动态属性（适用于结构不固定的对象） #

如果address.value的属性可能变化，或者有多个属性，用嵌套的keyvalue pipe遍历每个属性键值对：

<div class="card-text mb-1" *ngFor="let address of addresses | keyvalue">
  <p>Address: 
    <span *ngFor="let prop of address.value | keyvalue; let last = last">
      {{prop.key | titlecase}}: {{prop.value | titlecase}}{{last ? '' : ', '}}
    </span>
  </p>
</div>

这个方案会自动处理任意数量的属性，比如如果对象有State、City、ZipCode，页面会显示：Address: State: Rajasthan, City: Jaipur, ZipCode: 302001。

方案3：自定义管道（快速移除符号，慎用） #

如果一定要保留类似json pipe的输出但去掉符号，可以自定义一个管道来清理格式：

1. 先生成管道：

ng generate pipe stripJsonFormatting

2. 在管道文件中实现清理逻辑：

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

@Pipe({
  name: 'stripJsonFormatting'
})
export class StripJsonFormattingPipe implements PipeTransform {
  transform(value: any): string {
    if (typeof value !== 'object') return String(value);
    // 转成JSON字符串后，移除首尾大括号和所有双引号
    const jsonStr = JSON.stringify(value);
    return jsonStr.replace(/^\{/, '')
                  .replace(/\}$/, '')
                  .replace(/"/g, '');
  }
}

3. 在HTML中使用：

<div class="card-text mb-1" *ngFor="let address of addresses | keyvalue">
  <p>Address: {{address.value | stripJsonFormatting | titlecase}}</p>
</div>

⚠️ 注意：这个方案会移除所有双引号，如果属性值本身包含引号会被误删，所以只推荐在确定属性值不含引号的场景下使用。

内容的提问来源于stack exchange，提问作者Nick Rock