完整代码

<div class="header">
  <h3>欢迎来到购物车!</h3>
</div>

.header{
  width: 100%;
  height: 10%;
  background-color: #b6ccc8;
  display: flex;
  align-items: center;
  justify-content: center;
}

<app-my-header></app-my-header>
<router-outlet></router-outlet>
<app-my-footer></app-my-footer>

<section>
  <p>联系我们 | tel: 036-4758434095</p>
</section>

section{
  width: 100%;
  height: 15%;
  background-color: #b6ccc8;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  box-sizing: border-box;
  padding-top: 2%;
}

<div class="middle">
  <div class="left">
    <a [routerLink]="['product']">商品详情</a>
  </div>
  <div class="right">
    <p>welcome to shopping cart!</p>
    <router-outlet></router-outlet>
  </div>
  <div class="clean"></div>
</div>

.middle{
  width: 100%;
  height: 75%;
  text-align: center;
}
.left{
  width: 20%;
  height: 100%;
  float: left;
  background: #f7ffeb;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
}
.right{
  width: 80%;
  height: 100%;
  float: left;
  background: #ffdf90;
  text-align: center;
}
p{
  font-size: 20px;
}
.clean{
  clear: both;
}

<section>
  <h2>商品展示页面</h2>
  <div *ngFor="let item of items" class="des">
    <p>商品名称:{{item.proname}}, 商品价格:{{item.proprice}}</p>
    <p>商品描述:{{item.prodes}}</p>
  </div>
</section>

section{
  width: 100%;
  text-align: left;
}
h2{
  text-align: center;
}
.des{
  width: 100%;
  margin-top: 6px;
}

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-my-right',
  templateUrl: './my-right.component.html',
  styleUrls: ['./my-right.component.css']
})
export class MyRightComponent implements OnInit {
  items: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/pro/get').subscribe((data) => {
      console.log(data);
      this.items = data;
    });
  }
}

const mongoose = require('mongoose');

let express = require('express');
let bp = require('body-parser');
let app = express();
app.use(bp.json());


let db=mongoose.connect('mongodb://localhost/shoppingDB', {useNewUrlParser: true});
mongoose.connection.on("open",function () {
    console.log("数据库连接成功!");
    let schema=new mongoose.Schema({
        proname:{type:"String"},
        proprice:{type:"Number"},
        prodes:{type:"String"},
    },{
        collection:"shop_product"
    });
    let model=mongoose.model("shop_product",schema);
    
    app.get('/pro/get', function (req,res) {
        model.find({}, {proname: 1, proprice: 1, prodes: 1, _id: 1}, function (err, res1) {
            res.json(res1);
        });
    });
    /*model.create({
        proname:"诺基亚",
        proprice:5199,
        prodes:"诺基亚（NOKIA） X6 手机 双卡双待 全网通 移动联通电信4G手机 极地白（4+64GB）） "
    },function (err,res) {
        if(!err){
            console.log("插入数据成功!");
        }else{
            console.log("插入数据失败!");
        }
    });*/
});

app.listen(4556);