Запрашиваемый путь содержит неопределенный сегмент с индексом 1 - PullRequest
0 голосов
/ 21 сентября 2019

, когда я пытаюсь перейти от списка страниц элемента к представлению одного элемента, у меня появляется эта ошибка: запрошенный путь содержит неопределенный сегмент с индексом 1

код моей службы

import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
import { Prospect } from '../models/Prospect.model';
import { Subject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ProspectsService {

  prospects : Prospect[] = [];
  prospectsSubject = new Subject<Prospect[]>();

  constructor() { }

  emitProspects() {
    this.prospectsSubject. next(this.prospects);
  }

  saveProspects() {
    firebase.database().ref('/prospects').set(this.prospects);
  }

  createProspect(newProspect : Prospect)
{
  this.prospects.push(newProspect);
  this.saveProspects();
  this.emitProspects();
}

removeProspect(prospect : Prospect) {
  const  index = this.prospects.findIndex(
   (prospectEl) => {
     if(prospectEl === prospect) {
       return true;
     }
   }
 );
 this.prospects.splice(index, 1);
 this.saveProspects();
 this.emitProspects();
 }
getProspects()
{firebase.database().ref('/prospects').on('value',(data) => {
  this.prospects=data.val() ? data.val() : [];
  this.emitProspects();
});}

updateProspect(prospect: Prospect, id: number){
  firebase.database().ref('/prospects/' + id).update(prospect);
}
getSingleProspect(id: number) {
  return new Promise(
    (resolve, reject) => {
      firebase.database().ref('/prospects/' + id).once('value').then(
        (data) => {
          resolve(data.val());
        },
        (error) => {
          reject(error);
        }
      );
    }
  );
}
}

Код моего основного компонента:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as $ from 'jquery'
import { ProspectsService } from 'src/app/services/prospects.service';
import { Prospect } from 'src/app/models/Prospect.model';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'app-admin-prospects',
  templateUrl: './admin-prospects.component.html',
  styleUrls: ['./admin-prospects.component.css']
})
export class AdminProspectsComponent implements OnInit , OnDestroy{

  prospectForm: FormGroup;
  prospectsSubscription: Subscription;
  prospects : Prospect[];
  editProspect: boolean = false;

  constructor(private formBuilder: FormBuilder , 
     private prospectsService: ProspectsService ,
     private router: Router) { }

  ngOnInit() {
    this.initform();
    this.prospectsSubscription = this.prospectsService.prospectsSubject.subscribe(
      (prospects: Prospect[]) =>{
        this.prospects = prospects;
      }
    );
    this.prospectsService.getProspects();
    this.prospectsService.emitProspects();

  }
  initform(){

    this.prospectForm = this.formBuilder.group({
      id: [''], 
      nom: ['' , Validators.required],
      entreprise: ['' , Validators.required],
      mail: ['' , Validators.required],
      phone: ['' , Validators.required],
      description: ['']
    });

    }
    resetProspectForm(){
      this.editProspect = false;
      this.prospectForm.reset();
    }
    onSaveProspect(){
      const id = this.prospectForm.get('id').value;
      const nom = this.prospectForm.get('nom').value;
      const entreprise = this.prospectForm.get('entreprise').value;
      const mail = this.prospectForm.get('mail').value;
      const phone= this.prospectForm.get('phone').value;
      const description = this.prospectForm.get('description').value;
      const newProspect = new Prospect(nom, entreprise , mail , phone , description); 
     if(this.editProspect == true)
     {
       this.prospectsService.updateProspect(newProspect, id);

     }
     else{
       this.prospectsService.createProspect(newProspect);
     }



      $('#prospectsFormModal').modal('hide');
      this.prospectForm.reset();
    }
    ngOnDestroy(){
      this.prospectsSubscription.unsubscribe();
    }
    onDeleteProspect(prospect : Prospect) {
      this.prospectsService.removeProspect(prospect);
    }

    onEditProspect(prospect: Prospect , id:number){
   $('#prospectsFormModal').modal('show');
   this.prospectForm.get('id').setValue(id);
   this.prospectForm.get('nom').setValue(prospect.nom);
   this.prospectForm.get('entreprise').setValue(prospect.entreprise);
   this.prospectForm.get('mail').setValue(prospect.mail);
   this.prospectForm.get('phone').setValue(prospect.phone);
   this.prospectForm.get('description').setValue(prospect.description);
   this.editProspect = true;

 }
 onViewProspect(id:number) 
 {
    this.router.navigate(['/prospect' , id]);  

 }


  }

и HTML-код:

        <div class="row">
            <div class="col-12 d-flex">
                <h2 class="font-weight-light"><i class="fas fa-user"></i> Prospect</h2>
                 <button class="btn btn-primary ml-auto" type="button" data-toggle="modal" data-target="#prospectsFormModal"><i class="fas fa-plus"></i> Ajouter un prospect</button>
        </div>
        </div>
        <hr class="mt-1 mb-5 bg-dark">
        <div class="row">
            <div *ngFor="let prospect of prospects" class="col-12 shadow-sm p-4 mb-3 bg-light">
                <div class="row">
                    <h3 class="font-weight-normal pl-3">{{ prospect.nom }}</h3>

                    <div class="ml-auto">
                            <div class="ml-auto">
         <button class="btn btn-primary my-3 mx-auto"(click)="onViewProspect(i)">Plus de détails</button>
            <button class="btn btn-primary m-1"(click)="onEditProspect(prospect,i)"><i class="fas fa-edit"></i></button>
            <button class="btn btn-danger m-1"(click)="onDeleteProspect(prospect)"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
                <p>de {{ prospect.entreprise}}</p>
            </div>
                </div>
            </div>


    <div class="modal fade" id="prospectsFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="rounded shadow bg-white p-5">
                    <h3 class="font-weight-light">Nouveau Prospect</h3>
                    <hr class="mt-0 bg-dark">
                    <form [formGroup]="prospectForm" class="py-5" (ngSubmit)="onSaveProspect()">
                        <div class="form-group">
                            <input type="text" formControlName="nom" id="nom" placeholder="Nom" class="form-control">
                        </div>
                        <div class="form-group">
                                <input type="text" formControlName="entreprise" id="entreprise" placeholder="Entreprise" class="form-control">
                            </div>
                            <div class="form-group">
                                    <input type="email" formControlName="mail" id="mail" placeholder="Adresse Email" class="form-control">
                                </div>
                                <div class="form-group">
                                        <input type="tel" formControlName="phone" id="phone" placeholder="Numéro de Téléphone" class="form-control">
                                    </div>
                                    <div class="form-group">
                                            <textarea class="form-control" formControlName="description" id="description" placeholder="Description"></textarea>

                                        </div>
                                        <button class="btn btn-primary float-right" type="submit" [disabled]="prospectForm.invalid">Enregistrer</button>
                                    </form>

                </div>
            </div>
        </div>
    </div>

Эта проблема появляется, только когда я пытаюсь перейти к одному представлению с помощью "onViewProspect"

Спасибо, что помогли мне

1 Ответ

1 голос
/ 21 сентября 2019

Вероятно, ваш id, который входит в навигацию, равен undefined или null.Консоли ваш идентификатор и исправить, а затем перейти в навигацию.У меня была такая же проблема, и я ее исправил.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...