Как получить объект в параметрах запроса с помощью typescript?

При нажатии кнопки у меня есть функция,

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

В управляемом компоненте я получаю данные следующим образом:

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

Где,

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

А также,

console.log(data.mockup_id) gives result undefined

Здесь мне нужно получить значения объекта, но я не могу его получить. Пожалуйста, помогите мне получить данные через параметры запроса и получить с помощью машинописного текста ngOnit без использования html.

просто попробовать console.log(data.mockup_id)?

user4676340 10.09.2018 09:11

@trichetriche, дает значение как undefined, уже пробовал ..

Maniraj Murugan 10.09.2018 09:13

Затем предоставьте минимальный воспроизводимый пример, в котором воспроизводится проблема.

user4676340 10.09.2018 09:14

(можно использовать stackblitz.io)

user4676340 10.09.2018 09:14

добавьте сгенерированный URL в свой вопрос

John Velasquez 10.09.2018 09:24

@JohnVelasquez, URL-адрес локальный: 80000 / # / page-mockup? data =% 5Bobject% 20Object% 5D

Maniraj Murugan 10.09.2018 09:27

@trichetriche, ссылка на stackblitz была, stackblitz.com/edit/…

Maniraj Murugan 10.09.2018 09:45

@ManiRaj он не воспроизводит вашу проблему ...

user4676340 10.09.2018 09:47

@trichetriche, Невозможно сделать в нем маршрутизацию .. Так как я новичок в stackblitz, любезно помогите мне .. Я только что сделал весь код внутри него, но маршрутизация не работает .. В нем не работает маршрутизация от приложения к макету.

Maniraj Murugan 10.09.2018 09:49

@ManiRaj stackblitz - это просто онлайн-код Visual Studio. Реализуйте маршрутизацию, как если бы вы делали это в своем собственном приложении, которое импортирует модуль маршрутизатора, объявляет маршруты и использует выходы маршрутизатора.

user4676340 10.09.2018 09:52

@trichetriche, Это сделал только я .. Вы можете увидеть в моем примере, если какие-то исправления любезно мне помогут .. Я использовал маршруты в app.module.ts ..

Maniraj Murugan 10.09.2018 09:54
4
11
12 059
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Основываясь на вашем URL-адресе localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D, причина в том, что angular выбирает только ключ data и преобразует значение в строку (я думаю, это только для значений объектов), поэтому вы получаете [object Object]

console.log({mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432"}.toString());

Так что преобразуйте это

this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });

к этому

this.router.navigate(['/page-mockup'], { queryParams: data,  skipLocationChange: true });
  1. Вы добавляете к своему объекту бесполезный слой. Распространи это.

    this.router.navigate(['/page-mockup'], { queryParams: { ...data },  skipLocationChange: true });
    
  2. Если вы хотите использовать нотацию массива, используйте переменную массива, а не переменную карты.

  3. Отобразите правильные переменные.

    this.activatedRoute.queryParams.subscribe(params => {
      let data = params;
      console.log(data.mockup_id);
    });
    

Stackblitz

Другие вопросы по теме