Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 27.01.2018, 15:07   #1
MarlboroRed
Новичок
 
Регистрация: 27.01.2018
Сообщений: 3
Репутация: 10
По умолчанию Angular. Maping observable

Решил изучить ангуляр для раработки простых приложений работающих с апи. Прошел курс мододого бойца https://angular.io/tutorial. Но сейчас столкнулся со сложностью над которой сижу уже день и никак не могу ее разрешить.

Суть:

Есть базовая модель от которой наследуются другие:
Код:

export class Base {
  id: string;
  createDate: number; //милисекунды от 1 Jan 1970
  updateDate: number;

  createDateDate: Date; //тут должена быть дата на основе createDate
  updatDateDate: Date;
}

Модель товара:
Код:

export class Good extends Base {
  name: string;
  Prices: Price[];
}

export class GoodPaged {
  items: Good[];
  totalCount: number;
}

Метод получения товаров в сервисе
Код:

...
getGoods(page: number, name: string): Observable<GoodPaged> {
    let url = `${this.url}?page=${page}`;
    if (name != null && name.length) {
      url += `&name=${name}`;
    }
    return this.http.get<GoodPaged>(url);
...
  }

Компонент:
Код:

...
  goodPaged: GoodPaged;
  page: number;
  searchedName: string;

getGoods(): void {
    this.goodService.getGoods(this.page, this.searchedName).subscribe(
    r => {
      this.goodPaged = r;
    });
  }
...

Загвоздка состоит в том, что мне нужно присвоить значение createDateDate для каждого объекта Goods[] (this.goodPaged.items)

Сразу я посмотрел в сторону гетеров в TS, но в html шаблоне это не заработало, а потом и вовсе прочел что это не работает в angular;

Пробовал createDateDate присвоить функцию (): Date =>{...} и вызывать ее в шаблоне - не заработало.

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

Код:

getGoods(): void {
    this.goodService.getGoods(this.page, this.searchedName).subscribe(
    r => {
      r.items.forEach(i => {
        i.createDateDate = new Date(i.createDate);
      });
      this.goodPaged = r;
    });
  }

но это стремный вариант так как модель Good имеет Price[], а модель Price также наследуется от Base и для нее нужно все тоже самое.

Как быть?
MarlboroRed вне форума   Ответить с цитированием
Старый 29.01.2018, 10:50   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,655
Репутация: 1993
По умолчанию

Почему не засунуть в конструктор?
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 30.01.2018, 16:14   #3
MarlboroRed
Новичок
 
Регистрация: 27.01.2018
Сообщений: 3
Репутация: 10
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Почему не засунуть в конструктор?
Спасибо за ответ.

Попробовал в классе Good
Код:

constructor() {
    super();
    this.createDateDate = new Date(this.createDate);
    console.log(this);
  }

Но нет, он туда даже не обращается так как в консоли не появляется ничего. Даже если присвоить значение в базовом классе, например вот так:
Код:

createDateDate: Date = new Date();

И посмотреть результат в компоненте
Код:

getGoods(): void {
    this.goodService.getGoods(this.page, this.searchedName).subscribe(r => {
      this.goodPaged = r;
      console.log(this.goodPaged);
    });
  }

То в консоли всеравно нет этого (createDateDate) поля
СКРИН

Такое ощущение он создает объект просто сравнивая что пришло от сервера и описанный класс, а не делает это как-то через его инициализацию.

Последний раз редактировалось MarlboroRed; 30.01.2018 в 16:59.
MarlboroRed вне форума   Ответить с цитированием
Старый 30.01.2018, 17:33   #4
MarlboroRed
Новичок
 
Регистрация: 27.01.2018
Сообщений: 3
Репутация: 10
По умолчанию

Возможо, имелось ввиду передать объект в конструктор и присвоить его свойства к новому, например для базового:
Код:

constructor(obj: Base = null) {
    if (obj === null) {
      return;
    }

    this.id = obj.id;
    this.createDate = obj.createDate;
    this.updateDate = obj.updateDate;
    this.createDateDate = new Date(obj.createDate);
    this.updateDateDate = new Date(obj.updateDate);
  }

Для товара
Код:

constructor(obj: Good = null) {
    super(obj);
    this.name = obj.name;

    if (obj.prices && obj.prices.length > 0) {
      this.prices = [];
      obj.prices.forEach(i => {
        this.prices.push(new Price(i));
      });
    }
  }

Работает и в целом меня устраивает, покрайней мере я не вижу никаких проблем с использованем такого метода. Логика скрыта для каждого класса. Выглядит не плохо. Вот только сам мапинг меня смущает. Можно ли поля с одинаковыми именами и типами както автоматически присваивать, а не вот так?
Код:

this.createDate = obj.createDate;
    this.updateDate = obj.updateDate;

Так как же будут ли замечания по такому вот способу? Я как новичек в TS (да и с js не много опыта) легко могу не видеть чего-то очевидного.

Последний раз редактировалось MarlboroRed; 30.01.2018 в 17:57.
MarlboroRed вне форума   Ответить с цитированием
Старый 30.01.2018, 18:26   #5
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,655
Репутация: 1993
По умолчанию

Цитата:
Сообщение от MarlboroRed Посмотреть сообщение
Можно ли поля с одинаковыми именами и типами както автоматически присваивать, а не вот так?
Код:

    this.createDate = obj.createDate;
    this.updateDate = obj.updateDate;

Пробегись циклом по объекту и присваивай. Можно мапануть через keys.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищем angular/ionic разработчика Dianisima Фриланс 2 15.01.2018 09:43
angular.js maksim_serg JavaScript, Ajax 8 14.10.2015 10:03
Angular.js alexey_kip JavaScript, Ajax 20 27.03.2015 13:28
angular.min.js.map angularjs ts-alan JavaScript, Ajax 1 06.11.2014 17:26
инжектор angular ts-alan JavaScript, Ajax 1 06.11.2014 11:53


08:05.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru