Angular 在 html 表中显示 json 对象
Posted
技术标签:
【中文标题】Angular 在 html 表中显示 json 对象【英文标题】：Angular showing json object in html table 【发布时间】：2020-06-04 22:25:45 【问题描述】：大家好，我有来自 firestore 的 json 数据，我想在 html 表中显示这些数据。
这是我的 customer-list.component.html
<body>
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'></app-customer-details>
</div>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
好像没什么问题。
这是我的 customer-details.component.html
<div *ngIf="customer">
<tr>
<td>
<label>First Name: </label> customer.name
</td>
<td>
<label>Age: </label> customer.age
</td>
<td>
<label>Active: </label> customer.active
</td>
<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>
<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>
<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>
但我的表格输出是：
感谢您的回答。
【问题讨论】：
在您的详细信息组件中添加<pre>customer | json</pre> 以检查您是否正在获取数据？
正确获取数据但未正确显示数据名字：john 应位于表的名称列下。
【参考方案1】：
不要将客户组件的宽度限制为 300 像素，就像您在此处所做的那样：
<div *ngFor="let customer of customers" style="width: 300px;">
【讨论】：
还是一样，我尝试了不同的方法，例如在客户详细信息中初始化表格，但仍然相同的数据不分隔表格的列【参考方案2】：您有很多东西无法正确呈现您的表格：
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'>
</app-customer-details>
</div>
....
</tbody>
这将呈现如下：
<tbody>
<div ...>
<app-customer-details>
<div> <tr>.....</tr></div>
</app-customer-details>
</div>
....
</tbody>
这不是正确的 HTML。
将您的详细组件更改为使用ng-template：
<ng-template >
<tr *ngIf="customer">
<td><label>First Name: </label> customer.name</td>
<td><label>Age: </label> customer.age</td>
<td><label>Active: </label> customer.active</td>
<td>
Note: All spans should also be inside a TD tag
</td>
</tr>
</ng-template>
【讨论】：
当我使用 ng-template 表为空但数据通过时仍然相同，我尝试了 ng-container 但它给出的结果与图片相同【参考方案3】：当你查看 DOM 树时，你会发现
<tr><app-customer-details>...</app-customer-details</td>
这不会导致组件在表格中呈现为 a，而是会将整个组件 HTML 模板塞入一列中。
通过向组件添加属性选择器，即选择器：'app-customer-details，[app-customer-details]'，您可以像这样直接将选择器添加到元素，现在组件HTML模板中的元素将在表格内正确呈现。
看看这个link；
正确的代码如下： 客户列表.component.html
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<!-- <th class="text-center">#</th> -->
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers" [customerDetails]="customer">
</tr>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
客户详细信息.component.html
<td>
customerDetails.name
</td>
<td>
customerDetails.age
</td>
<td>
customerDetails.active
</td>
Customer-details.component.ts
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'customerDetails, [customerDetails]',
templateUrl: './customer-details.component.html',
styleUrls: ['./customer-details.component.css']
)
export class CustomerDetailsComponent implements OnInit
@Input() customerDetails: object = ;
constructor()
ngOnInit()
【讨论】：
这就是我要找的东西，谢谢你刚刚将 [customerDetails] 选择器添加到我的组件中。以上是关于Angular 在 html 表中显示 json 对象的主要内容，如果未能解决你的问题，请参考以下文章
如何从 KeyValue 管道中过滤特定值以显示在 html 表中的特定标题下 |角 6 +
（IONIC - Angular）我如何在 html 卡片中仅显示符合特定条件的 JSON 中的某些对象？
Angular 2 ngClass：在尝试在 html 上显示 json 时获取预期表达式的插值 ()