Как изменить формат даты angular2

Привет, я хочу изменить формат даты в соответствии с выбранным языком, я использую ng2-translate, и это мой рабочий код, но он статичен:

<span> {{product[col.field] | date : 'dd-MM-yyyy' >}} </span>

Я хочу иметь дату формата на текущем языке, что-то вроде этого:

<span> {{product[col.field] | date : 'DATE.PIPE' | translate >}} </span>

где в en.json у меня "DATE": { "PIPE": "MM-dd-yyyy" а в it.json у меня "DATE": { "PIPE": "dd-MM-yyyy" это возможно? или есть способ изменить формат даты программно?


angular formatdatetime pipe ng2-translate
person Alessandro Celeghin    schedule 11.04.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вам просто нужно поместить часть перевода в скобки:

{{ product[col.field] | date : ('DATE.PIPE' | translate) }}

Если вы этого не сделаете, канал date принимает строку 'DATE.PIPE' в качестве формата даты.

person Ján Halaša    schedule 11.04.2017
comment
похоже не работает Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30) и еще какая-то ошибка - person Alessandro Celeghin; 11.04.2017
comment
Вы поставили DATE.PIPE в апострофы - как строку? Я попробовал это в существующем приложении, и оно сработало хорошо. - person Ján Halaša; 11.04.2017
comment
Прочтите мой другой комментарий. Ваша текущая проблема не имеет ничего общего с каналом даты. Объект не инициализируется, когда вы пытаетесь получить к нему доступ. Вам нужно получить данные либо методом ngOnInit, либо получить формат даты, прежде чем вы получите другую информацию. - person Nikki Kononov; 11.04.2017
comment
хорошо, теперь у меня нет ошибок, но он показывает этот результат ссылка - person Alessandro Celeghin; 11.04.2017
comment
Вероятно, у вас неправильно определен ключ 'DATE.PIPE' в файлах локализации JSON. Попробуйте получить только {{ 'DATE.PIPE' | translate }} независимо от того, отображает ли он правильный формат или только строку DATE.PIPE. - person Ján Halaša; 11.04.2017
comment
да, теперь это работает, мне просто нужно перезапустить приложение, эта инструкция работает хорошо ` ‹span› {{product[col.field] | date : ('DATE.PIPE' | перевести) }} ‹/span›` - person Alessandro Celeghin; 11.04.2017

arrow_upward
2
arrow_downward

Просто удалите одинарные кавычки из канала даты, также известного как

<span> {{product[col.field] | date : DATE.PIPE | translate >}} </span>

Причина, по которой это не работает, заключается в том, что одинарные кавычки делают имя переменной строкой, и она пытается передать его в формате DATE.PIPE, но формат с таким именем не существует. Надеюсь, это имеет смысл.

Вот пример кода

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dateFormat = {
    date: {
      pipe: 'dd-MM-yyyy'
  }
};
  today = Date.now();
}

app.component.html

<span> {{today | date: dateFormat.date.pipe}} </span>
person Nikki Kononov    schedule 11.04.2017
comment
похоже не работает Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30) - person Alessandro Celeghin; 11.04.2017
comment
Это просто означает, что объект, к которому вы пытаетесь получить доступ, не определен. Покажите код, где/как вы получаете DATE.PIPE. - person Nikki Kononov; 11.04.2017
comment
Я обновляю свой ответ, чтобы показать пример с объектом. Я хотел посмотреть, как вы получаете объект или как вы его инициализируете. Причина PIPE undefined явно означает, что объект не существует. - person Nikki Kononov; 11.04.2017
comment
Это таблица с отложенной загрузкой private loadProductsLazy(event: LazyLoadEvent) { this.userService.getAll(event).subscribe(products => { this.products = products.content; this.totalRecords = products.page.totalElements;}) }, если я использую ваш пример, она работает, но не если я использую DATE.PIPE | перевести - person Alessandro Celeghin; 11.04.2017
comment
Не могу сказать, не видя остальной код, но я бы сказал, что это нужно вызывать в методе ngOnInit. Проблема, которую я вижу, заключается в том, что вы принимаете запрос события, который объясняет, почему вы получаете ошибку, нет объекта, пока не будет вызвана функция с событием, таким образом, PIPE undefined. Вам нужно будет получить данные до того, как страница будет отображена, или каким-то образом извлечь формат даты, прежде чем вы получите остальные свои записи в методе ngOnInit, поэтому либо получите все данные в ngOnInit следующим образом pastebin.com/Y0hTD5m8 или укажите формат даты отдельно. - person Nikki Kononov; 11.04.2017
comment
Хорошо, но в событии ngOnInit все не определено, поэтому мой http.get не может иметь правильные параметры - person Alessandro Celeghin; 11.04.2017
comment
Как я уже упоминал, вы либо получаете дату отдельно от остальных данных, либо, что еще лучше, предварительно назначаете формат даты, а затем используете асинхронный канал для запуска изменений при изменении формата. angular.io/docs/ts/latest/api/ common/index/AsyncPipe-pipe.html - person Nikki Kononov; 11.04.2017
comment
Мы сбились с пути, если у вас возникли проблемы с выяснением того, как получить данные или каковы ваши варианты передачи информации о канале, откройте другую проблему. Исходная проблема исправлена, поэтому, пожалуйста, отметьте ответ как правильный. - person Nikki Kononov; 11.04.2017

arrow_upward
0
arrow_downward

Попробуйте использовать момент.js, у него есть настройка перевода/локали, которая автоматически меняет часовой пояс и прочее.

Момент js

документы момент js

person HomeForce    schedule 11.04.2017