Angular、mysql 和 nodejs 创建一个列表视图

Question

我是 Angular 的新手，目前的旅程进展顺利，但也有点挑战。设法解决了应用程序的一些问题，例如在服务器中成功插入约会等等，但是尝试在 Angular 的列表视图中检索它似乎不起作用。请帮忙

我正在努力使用 mysql 中 nodejs 的数据创建一个列表视图。

angular 没有给我数据。

index.html:

 <div class="message-list">
                        <ul class="message-thread">
                            <li ng-repeat="ppPack in data.pp"
                            >
                                {{data.pp}} Posted by {{data.username}}
                            </li>
                        </ul>
                    </div>

控制器

$scope.selectFeed = () => {

  

        appService.getFeedList().then( (response) => {
           $scope.$apply(() => {

            let ppPack = {
                fromUserId: document.querySelector(" from_user_id").value,
                post: document.querySelector("#post").value
            }
                
            });

            $scope.data.pp = response.pp;


        }).catch( (error) => {
            console.log(error);
            alert('Unexpected Error, Try go back and redo somethings you did!.');
        });

}

帮助类

async getFeedList(){
        try {
            return await this.db.query(
                `SELECT * FROM posts ORDER BY id ASC`,
                [params.from_user_id,params.posts]
            );
        } catch (error) {
            console.warn(error);
            return null;
        }
    }

服务类

 getFeedList() {
        return new Promise((resolve, reject) => {
            this.httpCall({
                url: '/getPosts',
                'posts': $scope.data.pp,
                'from_user_id': $scope.data.username
            }).then((response) => {
                resolve(response);
            }).catch((error) => {
                reject(error);
            });
        });
    }

Answer 1

ng-repeat 使用您传递给 dom 的值。

从你的助手类开始，你需要传递你想要从数据库中收集的值，即使你似乎查询了所有东西，给它们赋予 params 值会让你更容易理解逻辑的代码，这意味着你查询应该是：

async getFeedList(posts, from_user_id)){  
      try {
       return await this.db.query(
       `SELECT * FROM posts ORDER BY id ASC`,
          [params.from_user_id,params.posts]
            );
        } catch (error) {
            console.warn(error);
            return null;
        }
    }

在你的服务类中，也传递参数

 getFeedList(posts, from_user_id) {
        return new Promise((resolve, reject) => {
            this.httpCall({
                url: '/getPosts',
                'posts': posts,
                'from_user_id': from_user_id
            }).then((response) => {
                resolve(response);
            }).catch((error) => {
                reject(error);
            });
        });
    }

并且在您的控制器文件中应该在其他范围之外，因为除非他们像这样自行请求服务，否则它们不会被调用：

 appService.getFeedList()
    .then((response) => {
      $scope.$apply(() => {
        $scope.postsData = response.postsData;
      //output to see the array before commit to the scope  
console.log(response);
      });
         })
    .catch((error) => {
        console.log(error);
          alert("error code!.");
             });

最后在你的 home.html 中你可以调用

     <div class="list-group">
        <ul class="list-group-item"
           ng-repeat="post in postsData"> 
            {{post.post}} Posted by <strong>{{post.from_user_id}} </strong</ul>
              </div>     

 

来自官方 Angular 网站的一些最佳实践技巧：

Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.