迭代 Angular2 中的 Mongoose 帖子答案

【问题标题】：Iterating over Mongoose posts in Angular2迭代 Angular2 中的 Mongoose 帖子
【发布时间】：2017-09-24 07:22:46
【问题描述】：

所以我是 Angular 的新手，并试图制作一个简单的博客网站，其中包含 title 和 post 保存到猫鼬。我想遍历数据库中的每个帖子以显示它们。我阅读了从ng-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)
        }
    }
})();

【问题讨论】：

对我来说这看起来像 Angular 1.x。你是什么意思？数据库条目作为json？输出是什么？
不要使用 *ngFor，您使用的是 html 中包含的 Angular 1.6.4。使用ng-repeat
我正在学习一个教程，在我意识到它是 Angular1 而不是 2 之前，我已经完成了 3/4。是的，我的输出是 json 格式的数据库条目。我读到typescript 和component class 需要导入*ngFor 才能工作？我来自 python 的世界，所以这一切都是新的。
可以看到输出的事实很好。这里与打字稿或组件无关。只需使用 ng-repeat，假设您获得了正确的 json 响应格式。
当我这样做时<div ng-repeat="post in posts"> <h2> {{post.title}} </h2> </div> 什么都没有出现。只有当我在h2 标记下有{{post}} 时，数据库条目才会显示为json。

标签： javascript angularjs node.js

【解决方案1】：

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

由于您使用的是 Angular 1.6.4。

【讨论】：