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

Question

我正在使用 Ionic 4，我想根据我输入的计算结果显示 table

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

这是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 文件中？

Answer 1

是的，应该可以。

首先，您可以将输入的结果转换为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

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

Store an object in JSON to output in NgxData-Table

javascript

json

angularjs

ionic-framework

ionic4

我正在使用 Ionic 4，我想根据我输入的计算结果显示 table

这是HTML文件，我用的是ngx-datatable