угловая локализация массива объектов

Question

У меня есть массив объектов внутри моего углового компонента, например:

      export class Result implements OnInit {
    sortBy = [
        { id: 'total', name: 'Sort by Price' },
        { id: 'time', name: 'Fast tour' },
        { id: 'delDate', name: 'Sort by delivery date' },
        { id: 'readyDate', name: 'Sort by tour ready date' }
      ];

....rest of code
}

и в моем шаблоне я использую его в своем настраиваемом компоненте выбора, как показано ниже:

      <app-material-select
                formControlName="sortBy"
                defaultValue="total"
                labelName="Sort by"
                [options]="sortBy" >
              </app-material-select>

И я попытался сделать работу, чтобы сделать перевод с помощью angular-localize, но на самом деле не нашел, так что есть идеи, как?

Answer 1

Сегодня у меня была точно такая же проблема, и я нашел решение. Поскольку я новичок в семье Angular, пожалуйста, учтите, что мой подход может быть наивным.

Я предполагаю, что вы хотите перевести элементы в массив sortBy. Вы можете указать Angular извлечь каждый из них с помощью $ localize. Поскольку кажется, что $ localize возвращает строковый тип, вы не можете использовать его непосредственно в sortBy. Итак, в вашем случае вы получите что-то вроде этого (при условии, что вы не хотите переводить идентификатор):

      export class Result implements OnInit {
    sortBy = [
        { id: 'total', name: $localize`Sort by Price` },
        { id: 'time', name: $localize`Fast tour` },
        { id: 'delDate', name: $localize`Sort by delivery date` },
        { id: 'readyDate', name: $localize`Sort by tour ready date` }
      ];

....rest of code
}

Angular предоставит вам соответствующий преобразователь для каждого элемента вашего файла .xlf после извлечения.