angular - 角度 json 数据未显示在表格中

Question

我有一个简单的表格，我需要显示来自 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",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    }, {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    }, {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    },

];

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss']
})
export class FormComponent {


    constructor() {

    }

}

它显示空白

你可以看到我有简单的 json 数组硬编码我只需要通过 ngFor 显示它但它显示为空白我做错了吗？我只是简单地通过 ngFor 显示我的数据，所以我可以在我的表中查看

标签： angulartypescript

Answer 1

您需要data通过以下方式将变量设置为类属性：

export class FormComponent {

    data = [
    {
        "name": "Ethel",
        "invoice": "XC-23As",
        "status": "PAID",
        "Amount": 100,
        "Category": 'Hardware'
    },...]
    
    constructor() {}
}

Angular 无法将const data变量插入 HTML，因为这不是组件类的属性。