刷新后，页面不加载 - Angular

Question

刷新后页面不加载 http://localhost:4200/user/products/5ab425c6f5bff145304092f7

刷新后的页面显示：

{"success":true,"data":[{"_id":"5ab548d8bea65e21c413766f","userid":"5ab425c6f5bff145304092f7","product_name":"Milck","product_type":"0","product_desc":"vvvvvv","__v":0},{"_id":"5aba43ef0a5c243330237bd5","userid":"5ab425c6f5bff145304092f7","product_name":"rolls","product_type":"0","product_desc":"rw","__v":0},{"_id":"5abb6c5b9f076e2af0a3bbe3","userid":"5ab425c6f5bff145304092f7","product_name":"xx","product_type":"1","product_desc":"xx","__v":0}]}

user-products.component.ts

@Component({
  selector: 'app-user-products',
  templateUrl: './user-products.component.html',
  styleUrls: ['./user-products.component.css']
})
export class UserProductsComponent implements OnInit {

  @Input()
  product: Product;

  user: User;
  UserType = UserType;

  product_name: string;
  product_type: ProductType;
  ProductType = ProductType;
  product_desc: string;

  produktForm: FormGroup;
  products: Product;
  userObj: any;
  expid: string;
  id: any;
  products_: any;

  constructor(private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private productsService: ProductsService,
    private authService: AuthService) { }

  ngOnInit() {

    this.userObj = this.authService.currentUser;
    const userid = this.userObj.userid;

     this.route.params.subscribe(params => {
      this.id =  params['id'];       
    });

    this.getProducts( this.id );

    this.produktForm = this.fb.group({
      product_name: this.product_name,
      product_type: this.product_type,
      product_desc: this.product_desc });

  }

  getProducts(userid) {
    console.log('getProducts userid ');
    console.log(userid);
    this.productsService.getProducts(userid).subscribe(res => {
      this.products_ = res.data;      
    });
  }
}

甚至没有显示页眉：

app.component.html：

<div class="container"> <app-navbar></app-navbar> <router-outlet></router-outlet> </div>

如何修复错误？所以刷新后页面显示出来了。

服务器脚本如下：

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app  = express();
var user = require('./routes/user.js');
var product = require('./routes/product.js');
const api = require('./server/api');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(require('body-parser').json({ type : '*/*' }));

app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
});

app.use(express.static(path.join(__dirname, 'dist')));

app.post('/register', user.signup);
app.post('/login', user.login); 
app.get('/user/:id', user.getuserDetails);
app.put('/user/:id', user.updateUser); 
app.post('/user/product/:id', product.saveproduct);
app.get('/users/products/', product.selectUsersProductsCount);
app.delete('/user/product/:id', product.deleproduct);

var apiRoutes = express.Router();
app.use('/api', apiRoutes);

app.get('/user/products/:id', product.selectproducts);  // method that returns data displayed after the page is refreshed
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.put('/user/product/:id', product.updateProduct);

const port = process.env.PORT || '4200'; // '3000';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

刷新页面后，服务器正确返回数据。

Answer 1

回答：

我正在编辑检索数据的服务器上的调用方法 ('/api/user/products/:id')

app.get('/api/user/products/:id', product.selectproducts);

在product.service.ts 中我正在编辑get 方法http://localhost:4200/api/user/products/${userid}

 getProducts(userid) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', `${this.jwtToken}`);
    let options = new RequestOptions({ headers: headers });

    return this.http.get(`http://localhost:4200/api/user/products/${userid}`, options)
      .map((response: Response) => response.json())
      .catch(this.handleError);
  }

Answer 2

这不是您问题的答案。我只是想澄清一下。你来这里做什么？

getProducts(userid) {
  console.log('getProducts userid ');
  console.log(userid);
  this.productsService.getProducts(userid).subscribe(res => {
    this.products_ = res.data;      
    console.log(this.products); //Please provide data here.
  });
}

很抱歉，但我不明白您要在此处显示的内容：

/user/products/userId

您是否要获取用户的购物车商品？如果是这样，您是否实现了项目/购物车类和用户类？下面的链接允许您在不登录的情况下将产品添加到购物车。笔记。我只是使用数组进行演示。链接在这里。 Angular 2 remove duplicate values from an array

当用户登录时在我的应用中。

 addItem(product: Product) {
  let item = new Item(product, 1, product.price, product.productId, '');
  const body = JSON.stringify(item);
  const token = localStorage.getItem('token');
  const headers = new Headers({'Authorization': token});
  headers.append('Content-Type', 'application/json');       
  const userId = localStorage.getItem('userId');
  console.log(item);
  return this._http.patch('http://localhost:3000/item/' + userId, body, {headers: headers})
    .map(response => response.json()) 
    .catch((err) => this.handleError(err)); 
  }

然后我可以循环我的 cartItems 并调用 addItem。我保存令牌和用户 ID。当用户注销时 - localStorage.clear();