JSON 在 HTML 中使用时数据未定义

Question

我是 Angular 和 Node 的新手，一直致力于全栈开发。我正在从连接到 MySQL 的节点读取 Angular 上的数据。我不知何故坚持在 HTML 页面上输出我的数据。当我尝试访问 HTML.

中的数据时出现未定义错误

This is the JSON data that I have read on my console

这是我将 JSON 对象转换为字符串的打字稿代码：

private onFetchPosts()
{
  this.http
  .get<{[key: string]: DataBase}>('http://localhost:3000/show')      //Here, DataBase is an interface
  .pipe(map(responseData => {
    const postsArray: DataBase[] = [];
    for (const key in responseData){
      if(responseData.hasOwnProperty(key)){
        postsArray.push({...responseData[key], idoffice: key});
      }
    }
    return postsArray;
  }))
  .subscribe(posts => {

    this.dbData = posts;                                           
    console.log(this.dbData);
  });
}

当我尝试在我的 HTML 代码中访问此数据时：

<h3>test print</h3>
<li class="list-group-item" *ngFor = "let db of dbData"></li>
<p>{{ db.ActivityType }}</p>

然后，我得到这个错误：

ERROR TypeError: Cannot read property 'ActivityType' of undefined

你能帮帮我吗？

Answer 1

在 li 中使用 db.ActivityType .

<li class="list-group-item" *ngFor = "let db of dbData">
    <p>{{ db.ActivityType }}</p>
</li>

Answer 2

<h3>test print</h3>
<li class="list-group-item" *ngFor = "let db of dbData">
<p>{{ db.ActivityType }}</p>
</li>

li 标签错误关闭。

JSON 在 HTML 中使用时数据未定义

JSON data undefined while using in HTML

mysql

node.js

angular

typescript

angular-fullstack