在Angular2中迭代Mongoosepost
所以我是Angular的新手，并试图build立一个简单的博客网站，包括title和post ，保存为mongoose。 我想遍历数据库中的每个post来显示它们。 我读的语法改变formsng-repeat到ngFor ＆我做到了这一点，但它显示的是数据库条目为json。 我在这里错过了什么？
index.html
<!DOCTYPE html> <html lang ="en" ng-app="BlogApp"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="app.js"></script> <meta charset="UTF-8"> <title>This is a title</title> </head> <body> <div class="container" ng-controller="BlogController"> <h1>Blog</h1> <input ng-model="post.title" class="form-control" placeholder="title"/> <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea> <button ng-click="createPost(post)" class="btn btn-primary btn-block">post</button> <div *ngFor = "let post of posts"> <h2> {{post.title}} </h2> <em> {{post.posted}} </em> <p> {{post.body}} </p> {{post}} </div> {{posts}} </div </body> </html>
server.js
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); var mongoose = require('mongoose'); mongoose.Promise = global.Promise; mongoose.connect('mongodb://localhost/blogfall2017', { useMongoClient: true }); var PostSchema = mongoose.Schema({ title: {type:String, required: true}, body: String, tag: {type: String, enum: ['POLITICS', 'ECONOMY', 'EDUCATION']}, posted: {type:Date, default: Date.now} }, {collection: 'post'}); var PostModel = mongoose.model("PostModel", PostSchema); app.use(express.static( 'dirname' + '/public')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true})); app.post("/api/blogpost", createPost); app.get("/api/blogpost", getAllPosts); function getAllPosts(req, res) { PostModel .find() .then( function(posts) { res.json(posts); }, function (err) { res.sendStatus(400); } ); } function createPost(req, res) { var post = req.body; console.log(post); PostModel .create(post) .then( function (postObj) { res.json(200); }, function (error) { res.sendStatus(400); } ); } app.listen(3000);
app.js
(function () { angular .module("BlogApp", []) .controller("BlogController", BlogController); function BlogController($scope, $http) { $scope.createPost = createPost; function init() { getAllPosts(); } init(); function getAllPosts() { $http .get("/api/blogpost") .then(function(posts) { $scope.posts = posts; }); } function createPost(post) { console.log(post); $http .post("/api/blogpost", post) .success(getAllPosts) } } })();
<div ng-repeat="post in posts">...</div>
既然你使用的是Angular 1.6.4。