Question

所以我是Angular的新手，并尝试创建一个由title和post组成的简单博客网站，这些网站会保存到mongoose。我想迭代数据库中的每个帖子以显示它们。我将语法从ng-repeat更改为ngFor＆amp;我做了这个，但它显示的是数据库条目为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)
        }
    }
})();

Answer 1

<div ng-repeat="post in posts">...</div>

因为您使用的是Angular 1.6.4。

迭代Angular2中的Mongoose帖子

1 个答案: