当我点击添加待办事项时，Url="undefined"

Question

我有一个与用户相关的家用应用程序，但是当我单击按钮转到 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 page with url relevant to that specific house

addtopage with url undeifned

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;
   }
   

   有关此解决方案的更多信息，请访问here。

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。您可以在here 获取有关此其他解决方案的更多信息。

这些代码示例未经测试，但是，我相信它们应该可以帮助您作为解决应用程序问题的起点。

如果这些信息对您有帮助，请告诉我！