当数据存储在 db.json 中时，数据没有显示在 html 数据中答案

【问题标题】：Data is not getting displayed in the html data, when it is stored in db.json当数据存储在 db.json 中时，数据没有显示在 html 数据中
【发布时间】：2022-08-19 12:59:02
【问题描述】：

我在 db.json 中存储了一些数据。在 ts 文件中，我使用了 get 函数并将其接收到变量中。数据成功通过（我使用console.log检查）。但是它没有显示在我创建的 html 表中。

下面是我的html文件

<p>people works!</p>

<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\">

<!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition\" -->

<!-- Position Column -->
<ng-container matColumnDef=\"id\">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef=\"let element; let i = index\"> {{i+1}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef=\"name\">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef=\"company\">
  <th mat-header-cell *matHeaderCellDef> Comapnay </th>
  <td mat-cell *matCellDef=\"let element\"> {{element.company}} </td>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef=\"email\">
  <th mat-header-cell *matHeaderCellDef> Email </th>
  <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>
</ng-container>

<ng-container matColumnDef=\"address\">
    <th mat-header-cell *matHeaderCellDef> Address </th>
    <td mat-cell *matCellDef=\"let element\"> {{element.address}} </td>
  </ng-container>

  <ng-container matColumnDef=\"active\">
    <th mat-header-cell *matHeaderCellDef> Active </th>
    <td mat-cell *matCellDef=\"let element\"> {{element.active}} </td>
  </ng-container>

  <ng-container matColumnDef=\"action\">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef=\"let element; let j = index\"><button (click) = \"detail(j)\"> {{element.action}} </button></td>
  </ng-container>

 <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>
  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>
 </table>
  
<div id = \"Detail\">
  {{userDetail.id}}<br>
  {{userDetail.name}}<br>
  {{userDetail.company}}<br>
  {{userDetail.email}}<br>
  {{userDetail.active}}<br>
  {{userDetail.action}}
 </div>

下一个代码是我的 ts 文件

import { Component, OnInit } from \'@angular/core\';
import { HttpClient } from \'@angular/common/http\';
import { user } from \'./userInterface\';

@Component({
selector: \'app-people\',
templateUrl: \'./people.component.html\',
styleUrls: [\'./people.component.css\']
})
export class PeopleComponent implements OnInit {

 displayedColumns=[\"id\",\"name\",\"company\",\"email\",\"address\",\"active\",\"action\"];
 UserDb:user[]=[];

 dataSource = this.UserDb;
 userDetail: user={
  id: 0,
  name: \'\',
  company: \'\',
   email: \'\',
  address: \'\',
  active: false,
  action: \'\'
};

detail(rowid: number) {
  this.userDetail = this.UserDb[rowid];
}


 constructor(private _http: HttpClient) { 

 }

 ngOnInit(): void {

  console.log(\"im working\");
  this._http.get(\"http://localhost:3002/posts\").subscribe((users:any)=>{
    this.UserDb = users;
    console.log(this.UserDb);
   })

 }

 }

我的全部数据都显示在控制台中。

data in the console. But not showing under the table

标签： json angular angular-material

【解决方案1】：

看起来dataSource 得到了UserDB 的值前UserDB 已填充。因此，您在控制台中获得了有效数据；但不是在 HTML 中。为什么首先使用两个变量？

【讨论】：

【解决方案2】：

嗨，我在代码中发现了错误。实际上，json中使用的变量需要与程序前端部分使用的变量完全相同。就像在我的ts代码中我使用了'id'和'name'。但是在json中我使用了相同的变量'写成'Id'和'Name'。因此，问题。

【讨论】：