返回带角度和快速的自定义路线

时间:2018-06-04 12:24:25

标签: angular mongodb express

我试图做一些相对简单的事情。我试图使用expressJS路由从我的mongo数据库中检索数据,但我想使用params来过滤结果。它似乎工作时,我按ID过滤或根本不过滤,但当我尝试通过另一个字段过滤它倒下。 基本上我只是想按部门检索团队

app.component看起来像这样

<li><a [routerLink]="['/teams']" [queryParams]="{ division: '1'}">View/Create Div 1 Teams </a></li>

我的team.component看起来像这样&gt;

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import {URLSearchParams} from '@angular/http';
@Component({
 selector: 'app-team',
  templateUrl: './team.component.html',
   styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
  teams: any;
  division: string;
   constructor(private router: Router, private route: ActivatedRoute, 
  private http: HttpClient) { }
 ngOnInit() {

this.route.queryParams
 .subscribe(params => {
   this.division = params.division;
 });
 console.log(this.division);

//this.http.get('/team').subscribe(data => { // this gets all teams ok
this.http
.get('/team/'+this.division)
.subscribe

(data => {
  this.teams = data;
});
}

  deleteTeam(id) {
   this.http.delete('/team/'+id)
     .subscribe(res => {
       location.reload();
      //this.router.navigate(['/teams']);
    }, (err) => {
      console.log(err);
    }
  );
  }
 }**

我的app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';


 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';

 import { RouterModule, Routes } from '@angular/router';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TeamComponent } from './team/team.component';
 import { TeamCreateComponent } from './team-create/team-create.component';
 import { TeamEditComponent } from './team-edit/team-edit.component';

 const appRoutes: Routes = [
 {
    path: 'teams',
    component: TeamComponent,
    data: { title: 'Team List' }
  },
{
    path: 'teams/:division',
    component: TeamComponent,
    data: { title: 'Team List' }
},



@NgModule({
   declarations: [
   AppComponent,
   TeamComponent,

 ],
imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    FormsModule,
    HttpClientModule,
     RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
   )
   ],
  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

team.js

var express = require('express');
var router = express.Router();

var mongoose = require('mongoose');
var Team = require('../models/Team.js');

   /* GET ALL TeamS */
    router.get('/', function(req, res, next) {
    console.log("just GET");
    Team.find(function (err, products) {
    if (err) return next(err);
     res.json(products);
   });
  });

   router.get('/:division', function(req, res, next) {
     console.log("HMMMMMM");    
     Team.find(req.params.id, function (err, post) {
       if (err) return next(err);
       res.json(post);
    });
   });

  router.get('/:id', function(req, res, next) {
    console.log("ID");
  Team.findById(req.params.id, function (err, post) {
   if (err) return next(err);
   res.json(post);
  });
 });



module.exports = router;

0 个答案:

没有答案