时间戳

首页 > 解决方案 > 在 JSON 中存储一个对象以在 NgxData-Table 中输出

javascript - 在 JSON 中存储一个对象以在 NgxData-Table 中输出

问题描述

我正在使用 Ionic 4，我想根据我的输入计算显示一个表格

我找到了一种从本地 JSON 文件中获取数据的方法，但这里的问题是我想根据计算的输入而不是 JSON 中的手动对象在表上显示数据。

这是 HTML 文件，我使用了 ngx-datatable

<ngx-datatable
        class="material"
        [rows]="rows"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
        <ngx-datatable-column name="Month">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Interest">
        <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
            <span (click)="sort()">{{column.name}}</span>
          </ng-template>
          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <i>{{value}}</i>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Principal">
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Total">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Balance">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>

这是来自 TS 文件

this.fetch((data) => {
      this.rows = data.splice(0, 5);
    });

fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/company.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

带有模拟数据的 JSON 文件

[
    {
        "month": "July/2019",
        "interest": "11111",
        "principal": "22222",
        "total": "33333",
        "balance": "44444"
    },
    {
        "month": "Dec/2019",
        "interest": "55555",
        "principal": "66666",
        "total": "77777",
        "balance": "88888"
    },
    {
        "month": "Jun/2019",
        "interest": "99999",
        "principal": "121212",
        "total": "232323",
        "balance": "343434"
    }
]

我在这里计算了对象：

this.displayTotal = this.monthlyPayment;
this.displayPrincipal = this.displayTotal - this.displayInterest;
this.displayBalance = this.loanAmount - this.displayPrincipal; 
this.displayInterest = (this.interestRate/this.loanTerm) * this.displayBalance;
this.displayMonth = this.displayMonth;

是否可以将这些对象集成到 JSON 文件中？

标签： javascriptjsonangularjsionic-frameworkionic4

解决方案

是的，这应该是可能的。

首先，您可以将输入的结果转换为 JSON 格式：

/*this.displayTotal = this.monthlyPayment;
this.displayPrincipal = this.displayTotal - this.displayInterest;
this.displayBalance = this.loanAmount - this.displayPrincipal; 
this.displayInterest = (this.interestRate/this.loanTerm) * this.displayBalance;
this.displayMonth = this.displayMonth;*/
//demo mocknumber:

var displayMonth = 1000;
var displayInterest = 10;
var displayPrincipal = 100;
var displayTotal = 1000;
var displayBalance = 10000;

var json = [{
  "month": this.displayMonth,
  "interest": this.displayInterest,
  "principal": this.displayPrincipal,
  "total": this.displayTotal,
  "balance": this.displayBalance,
}];

console.log(json);

然后你可以按照这个答案所说的那样尝试（修改）：

var a = document.createElement('a');
a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(JSON.stringify(this.json)));
a.setAttribute('download', this.filename);
a.click()

演示：https ://stackblitz.com/edit/angular-m5wd2x?file=src/app/app.component.ts

推荐阅读