Url = "неопределенный", когда я нажимаю, чтобы добавить

Question

У меня есть домашнее приложение, относящееся к пользователю, но когда я нажимаю кнопку для go на странице addtodo, оно теряет URL дома относительно пользователя, что затем приводит к todolist хранится в Firebase как undefined вместо дома, выбранного пользователем. Есть идеи, почему это так? Я попытался передать URL следующим образом.

Todolist.ts

import { Component, OnInit } from '@angular/core';
import {NavController} from "@ionic/angular";
import { House, HouseService } from '../Services/house.service';
import { ActivatedRoute, Route, Router } from '@angular/router';
import { TodoserviceService } from '../Services/todoservice.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { Todolist } from '../modal/Todolist';
import { Observable } from 'rxjs';
import { UserService } from '../Services/user.service';
@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.page.html',
  styleUrls: ['./todolist.page.scss'],
})
export class TodolistPage implements OnInit {
  minDate = new Date().toISOString();

  house;
  currentHouse:House;
  currentHouseId: string;
  DB;
  todoArray = [];

  todo = {
    title: '',
    description: '',
    last_Date: new Date().toISOString(),

  }
  constructor(private afs: AngularFirestore,
    private router: Router,
    private houseService: HouseService,
    private userService: UserService,private navCtrl: NavController) { 
      //get ID of house from URL
      let id1 = this.router.url.split('id=');
      let id2 = id1[1].toString();
      let id3 = id2.split('/');
      let id = id3[0].toString();


      this.houseService.getHouse(id);
    if (id) {
      this.houseService.getHouse(id).subscribe(house => {
        this.currentHouse = house;
        this.house = id;
      });}
      //initialise DB             
  this.DB = this.afs.collection('house').doc(id).collection('todolist');

  this.DB.snapshotChanges().subscribe(colSnap => {
    this.todoArray = [];
    colSnap.forEach(snap => {
      let todo: any = snap.payload.doc.data();
      todo.id = snap.payload.doc.id;
      todo.last_Date = new Date(todo.last_Date).toDateString();
      this.todoArray.push(todo);
    });
  });

  }//end constructor

  ngOnInit() {
  }

  gotoAddToDo(house:string){
    this.navCtrl.navigateForward(['/add-todo',{id:house}]);
  }
}

add-todo.ts

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { ToastController } from '@ionic/angular';
import { House, HouseService } from '../Services/house.service';
import { ActivatedRoute, Route, Router } from '@angular/router';
import { TodoserviceService } from '../Services/todoservice.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { Todolist } from '../modal/Todolist';
import { Observable } from 'rxjs';
import { UserService } from '../Services/user.service';

@Component({
  selector: 'app-add-todo',
  templateUrl: './add-todo.page.html',
  styleUrls: ['./add-todo.page.scss'],
})



export class AddTodoPage implements OnInit {last_Date = new Date().toISOString();

  currentHouse;
  house;
  currentHouseId;
  DB;
  todoArray = [];

  todo = {
    title: '',
    description: '',
    last_Date: new Date().toISOString(),

  }

  constructor(private afs: AngularFirestore,
              private router: Router,
              private houseService: HouseService,
              private userService: UserService) { 

                let id1 = this.router.url.split('id=');
                let id2 = id1[1].toString();
                let id3 = id2.split('/');
                let id = id3[0].toString();


                this.houseService.getHouse(id);
              if (id) {
                this.houseService.getHouse(id).subscribe(house => {
                  this.currentHouse = house;
                  this.house = id;
                });}

  //initialise DB             
  this.DB = this.afs.collection('house').doc(id).collection('todolist');

  this.DB.snapshotChanges().subscribe(colSnap => {
    this.todoArray = [];
    colSnap.forEach(snap => {
      let todo: any = snap.payload.doc.data();
      todo.id = snap.payload.doc.id;
      todo.last_Date = new Date(todo.last_Date).toDateString();
      this.todoArray.push(todo);
    });
  });

  }//end constructor

  ngOnInit() {
  }


  addtodo(){
    this.DB.add(this.todo);
    this.resetTodo();
    console.log("todoadded")
  }

  //fucntion to reset values of bill object
  resetTodo(){
    this.todo = {
      title: '',
      description: '',
      last_Date: new Date().toISOString(),
    }
  }


}

Страница Todo с URL-адресом, соответствующим этому параметру c house

addtopage с URL-адресом без определения

Answer 1

Есть несколько возможных причин проблемы, с которой вы сталкиваетесь. Я постараюсь привести примеры того, что может повлиять на вас, и способы, которыми вы можете воспользоваться, чтобы исправить это.

1. Для вашего {id:house} вам, возможно, придется отправить его как поставщика, а затем загрузите его в ngOnInit() на странице назначения. Таким образом, ваш код будет выглядеть примерно так:

   @Injectable({
      providedIn: 'root'
   })
   export class MyNavService {
      myParam: any; // of course replace any with a nice interface of your own
   }
   

   , тогда на вашей вызывающей странице вы наберете

   this.myNavService.myParam = {id:house};
   await this.navCtrl.goForward('/add-todo');
   

   и на странице, где вам нужен параметр

   ngOnInit() {
      this.myObject = this.myNavService.myParam;
   }
   

   Более подробную информацию об этом решении можно найти здесь .

2. Другой вариант - отправить параметр несколько так же, как вы, но с некоторыми различия. Эти различия можно увидеть в приведенном ниже коде:

   // Send Parameter in ToDoList
   import { NavController } from '@ionic/angular';
   import { NavigationExtras } from '@angular/router';
   //...
   constructor(public navCtrl: NavController) { }
   //...
     let navigationExtras: NavigationExtras = {
     queryParams: {
         house: JSON.stringify(id),
         refresh: refresh
     }
   };
   this.navCtrl.navigateForward(['page-slug'], true, navigationExtras);
   
   // Receive Parameter add-todo
   import { ActivatedRoute } from "@angular/router";
   //...
   constructor(private route: ActivatedRoute) {}
   //...
   this.route.queryParams.subscribe(params => {
     this.refresh = params["refresh"];
     this.currency = JSON.parse(params["house"]);
   });
   

   Этот код должен помочь вам отправлять параметры и получать их правильно, при этом вы получили неопределенную отправку, а затем сгенерировали неправильный URL. Вы можете получить больше информации об этом другом решении здесь .

Эти примеры кода не проверены , однако я считаю, что они должны помочь вам как Отправная точка для устранения проблемы в приложении.

Дайте мне знать, помогла ли вам эта информация!