如何解决Angular json 数据未显示在表中
我有一个简单的表格,我需要显示来自 json 的数据,但它显示空白 我有 .ts 格式的 json 格式的固定数据,我只需要在 html 上显示它。
我的HTML代码
<section id="shopping-cart">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-warning" style="float: left;">
<h4 class="card-title">Invoice Summary</h4>
</div>
<div style="float: right;">
<a routerLink="/full-layout/add-form" class="btn btn-raised mr-1 btn-success">Add</a>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 mb-1">
<fieldset class="form-group">
<label for="helpInputTop">Search</label>
<input type="text" class="form-control" id="helpInputTop">
</fieldset>
</div>
<div class="card-body">
<div class="card-block">
<div class="table-responsive">
<table id="recent-orders" class="table table-hover table-xl mb-0">
<thead>
<tr>
<th class="border-top-0">Status</th>
<th class="border-top-0">Invoice#</th>
<th class="border-top-0">Customer Name</th>
<th class="border-top-0">Categories</th>
<th class="border-top-0">Shipping</th>
<th class="border-top-0">Amount</th>
<th class="border-top-0">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of data">
<td class="text-truncate"><i class="fa fa-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
<td class="text-truncate"><a href="#">{{ x.invoice }}</a></td>
<td class="text-truncate">
<span>{{ x.name }}</span>
</td>
<td>
<button type="button" class="btn btn-sm btn-outline-danger round">{{ x.Category }}</button>
</td>
<td>
<ngb-progressbar type="danger" [value]="25" [striped]="true" class="progress-bar-md bg-gradient-x-danger"></ngb-progressbar>
</td>
<td class="text-truncate">$ {{ x.price }}</td>
<td>
<a class="success p-0" data-original-title="" title="">
<i class="fa fa-pencil font-medium-3 mr-2"></i>
</a>
<a class="info p-0" data-original-title="" title="">
<i class="fa fa-check font-medium-3 mr-2"></i>
</a>
<a class="danger p-0" data-original-title="" title="">
<i class="fa fa-trash-o font-medium-3 mr-2"></i>
</a>
</td>
</tr>
</tbody>
</table>
<ngb-pagination [collectionSize]="10" [pageSize]="2" [maxSize]="7" [rotate]="true" ></ngb-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.ts
import { Component,OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
declare var require: any;
const data: any = [
{
"name": "Ethel","invoice": "XC-23As","status": "PAID","Amount": 100,"Category": 'Hardware'
},{
"name": "Ethel",];
@Component({
selector: 'app-form',templateUrl: './form.component.html',styleUrls: ['./form.component.scss']
})
export class FormComponent {
constructor() {
}
}
显示空白
你可以看到我有简单的 json 数组硬编码,我只需要通过 ngFor 显示它,但它显示空白我做错了什么?我只是简单地通过 ngFor 显示我的数据,以便我可以在我的表格中查看
解决方法
您需要通过以下方式将 data
变量设置为类属性:
export class FormComponent {
data = [
{
"name": "Ethel","invoice": "XC-23As","status": "PAID","Ammount": 100,"Category": 'Hardware'
},...]
constructor() {}
}
Angular 无法将 const data
变量插入到 HTML 中,因为这不是组件类的属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。