如何在外部化字符串数组 [Angular] 时使用 TranslateService

Question

我不太了解外化。我在 Angular 中创建了一个月份选择器。在我的打字稿文件中，我有一系列带有硬编码名称的月份：

arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

我的前辈告诉我将它们外部化到一个单独的 json 文件中，以便以后可以根据需要轻松修改它们。现在我将向您展示我的代码。

monthpicker.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    ...
})
export class MonthpickerComponent implements OnInit {

    constructor(private translate: TranslateService){
    }


    //arr = ['Jan', 'Feb', ... 'Nov', 'Dec'];
    monthArray = []; /* USING A DIFFERENT EMPTY ARRAY INSTEAD*/

    translateCard(): void {
        this.translate
            .get([
                'Months.January',
                'Months.February',
                ...
                'Months.December'
            ])
            .subscribe(translations => {
                this.monthArray.push(translations['Months.January']);
                this.monthArray.push(translations['Months.February']);
                ...
                this.monthArray.push(translations['Months.December']);
            });
            console.log(this.monthArray);
    }

    ngOnInit(): void {
        this.translateCard();
    }

   /* CODE TO READ MONTH NAMES AND RENDER IN HTML*/
    n = 4;
    matrix: any = Array.from({ length: Math.ceil(this.monthArray.length / this.n) }, (_, i) => i).map(i =>
        this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
            monthName: x,
            isSelected: false
        }))
    );

   ...
}

monthpicker.component.html

<div *ngFor="let row of matrix" class="my-table">
  <span *ngFor="let x of row">
    <span class="month-name">
      {{ x.monthName }}
    </span>
  </span>
</div>

这里 en-US.json

{
  "Months": {
    "January": "Jan",
    "February": "Feb",
    ...
    "October": "Oct",
    "November": "Nov",
    "December": "Dec"
  }
}

这是我所有的代码。控制台上什至没有一个错误或警告。事实上 console.log(this.monthArray[]) 也正确打印了所有月份。但是在前端，我的月份选择器面板是绝对空白的。什么都没有发生。我认为我的调用在这里是异步的：

ngOnInit(): void {
  this.translateCard();
}

我尝试了 safely use translate.instant() 和许多其他解决方案，但仍然是空白。请纠正我的实现有什么问题。

Answer 1

订阅后您需要填充 matrix 数组，因为 monthArray 将被异步填充。进行以下更改：

translateCard(): void {
    this.translate
        .get([
            'Months.January',
            'Months.February',
            ...
            'Months.December'
        ])
        .subscribe(translations => {
            this.monthArray.push(translations['Months.January']);
            this.monthArray.push(translations['Months.February']);
            ...
            this.monthArray.push(translations['Months.December']);
            // populate matrix
            this.matrix = Array.from({ length: Math.ceil(this.monthArray.length / 
                this.n) }, (_, i) => i).map(i =>
                    this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
                        monthName: x,
                        isSelected: false
                    }))
               );
        });

}

如何在外部化字符串数组 [Angular] 时使用 TranslateService

How to use TranslateService while externalizing an array of string [Angular]

json

typescript

ngx-translate

angular