Angular13中ngx-translate出现undefined.json请求及切换失效问题

核心问题定位 #

首先你的代码存在构造函数拼写错误：contructor → 正确应为constructor，这直接导致初始化阶段的语言配置代码完全未执行，是引发所有问题的根源。

逐个问题修复 #

1. 解决 GET .../undefined.json 404错误

• 修复构造函数拼写错误，确保addLangs和setDefaultLang正常执行，初始化默认语言后，ngx-translate不会请求命名为undefined的语言文件。
• 同时确认assets/i18n目录下存在en.json和es.json文件，且HttpLoader配置符合默认规则（加载assets/i18n/{lang}.json）。

2. 修复语言选择下拉框未同步问题

• 下拉框事件绑定错误：将(click)改为(change)，click会在点击下拉框时触发（此时未完成语言选择），而(change)才是选择选项后触发的正确事件。
• 构造函数修复后，translate.getLangs()会返回配置的['en','es']，下拉框会正确渲染选项，且[selected]绑定会根据translate.currentLang同步选中状态。

3. 修复语言切换逻辑异常与this.language为undefined问题

• 在switchLang方法中给this.language赋值，解决控制台打印undefined的问题。
• 移除错误的if(this.translate.use('en'))判断：translate.use()是设置当前语言的方法，返回Observable，不能用于布尔判断。直接通过传入的language参数或translate.currentLang控制translateEn的值。

修复后的完整代码 #

home.component.html

<span class="form-inline">
  <select 
    class="form-control" 
    #selectedLang 
    (change)="switchLang(selectedLang.value)">
    <option *ngFor="let language of translate.getLangs()" 
      [value]="language"
      [selected]="language === translate.currentLang">
      {{ language }}
    </option>
  </select>
</span> 

<div class="row">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let room of rooms">
      <div class="row">
        <div class="col-sm-2 col-md-3 col-lg-3">
          <div *ngIf="!room.image1 || room.image1 == undefined; else noimage">
            <img class="img-list" src="{{ url + 'avatar/' + 'no-image.png'  }}" alt="student">
          </div>
          <ng-template #noimage>
            <img class="img-list" src="{{ url + 'avatar/' + room.image1 }}" alt="student">
          </ng-template>
        </div>
        <div class="col-sm-10 col-md-9 col-lg-9">
          <div *ngIf="translateEn == true; then thenBlock else elseBlock"></div>
          <ng-template #thenBlock>     <p class="title-room">{{ room.title }}</p></ng-template>
          <ng-template #elseBlock> <p class="title-room">{{ room.titleEs }}</p></ng-template>
          <div *ngIf="translateEn == true; then thenBlock2 else elseBlock2"></div>
          <ng-template #thenBlock2>     <p class="data-room">{{ room.location }}</p></ng-template>
          <ng-template #elseBlock2> <p class="data-room">{{ room.locationEs }}</p></ng-template>
          <div *ngIf="translateEn == true; then thenBlock3 else elseBlock3"></div>
          <ng-template #thenBlock3>     <p class="data-room">{{ room.description | less:[150, '...'] }}</p></ng-template>
          <ng-template #elseBlock3> <p class="data-room">{{ room.descriptionEs | less:[150, '...'] }}</p></ng-template>
          <div *ngIf="translateEn == true; then thenBlock4 else elseBlock4"></div>
          <ng-template #thenBlock4>     <p class="data-room">{{'RoomType' | translate}} {{ room.roomtype }}</p></ng-template>
          <ng-template #elseBlock4> <p class="data-room">{{'RoomType' | translate}} {{ room.roomtypeEs }}</p></ng-template>
          <p>&#163; {{ room.price }} pm</p>
          <a [routerLink]="['/room', room._id]" class="btn btn-danger pl-4 pr-4 pt-3 pb-3">View</a>
        </div>
      </div>
    </li>
  </ul>
</div>

home.component.ts

import { TranslateService } from '@ngx-translate/core';

public translateEn: boolean = true;
public language: string;

// 修复构造函数拼写
constructor(private translate: TranslateService) {
  this.translate.addLangs(['en', 'es']);
  this.translate.setDefaultLang('es');
  // 初始化时设置当前语言，同步下拉框选中状态
  const browserLang = this.translate.getBrowserLang();
  this.translate.use(browserLang.match(/en|es/) ? browserLang : 'es');
  // 同步初始化translateEn的值
  this.translateEn = this.translate.currentLang === 'en';
}

switchLang(language: string) {
  this.translate.use(language);
  this.language = language; // 赋值解决console.log undefined问题
  console.log('valor language', this.language);
  console.log('this.translate.currentlang', this.translate.currentLang);
  
  // 简化translateEn判断逻辑
  this.translateEn = language === 'en';
}

内容的提问来源于stack exchange，提问作者Rafael Hernández