要解决Angular翻译管道不起作用，无法从JSON中获取数据的问题，可以按照以下步骤进行：

1. 确保已正确设置和配置Angular的国际化功能。

   • 在app.module.ts文件中导入Angular的国际化模块，并将其添加到NgModule的imports数组中。
   • 在angular.json文件中设置正确的i18n配置。

2. 创建一个翻译服务来加载和管理翻译文件。

   • 创建一个名为TranslationService的服务，并在其中导入HttpClient模块。
   • 在TranslationService中创建一个方法来加载翻译文件的JSON数据。可以使用HttpClient的get方法来获取JSON数据。
   • 在TranslationService中创建一个方法来根据给定的键获取对应的翻译文本。

3. 在组件中使用翻译管道来获取翻译文本。

   • 在组件的模板文件中，使用翻译管道来获取翻译文本。例如，使用{{ 'KEY' | translate }}来获取键为'KEY'的翻译文本。

下面是一个示例代码：

translation.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TranslationService {
  private translations: any;

  constructor(private http: HttpClient) { }

  loadTranslations(): void {
    this.http.get('assets/i18n/translations.json').subscribe(data => {
      this.translations = data;
    });
  }

  translate(key: string): string {
    return this.translations[key];
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

{{ 'HELLO' | translate }}

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { TranslationService } from './translation.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private translationService: TranslationService) { }

  ngOnInit(): void {
    this.translationService.loadTranslations();
  }
}

translations.json:

{
  "HELLO": "你好"
}

以上代码示例展示了如何创建一个简单的翻译服务，并在组件中使用翻译管道来获取翻译文本。确保将translations.json文件放置在assets/i18n目录下，并正确设置angular.json文件中的i18n配置。