Truy cập JSON Data từ HTML - Angular 4

Paul

New Member
#1
Mình có dữ liệu JSON này mà mình cần truy cập từ HTML của mình bằng MatCellDef của Angular 4. Mình cần đọc FROM, TO, PERCENT và SUBTRACT của mảng RateBands.

File JSON:
JSON:
 [ 
   { 
      "yearlyincentive":{ 
         "incentive":{ 
            "number":"0",
            "description":"null"
         },
         "year":"2016"
      },
      "computationrates":{ 
         "0":{ 
            "computation":"0",
            "ratetype":"0",
            "ratebands":[ 
               { 
                  "from":"14",
                  "to":"2015",
                  "percent":"30",
                  "subtract":"1"
               }
            ]
         }
      }
   }
]
HTML:
HTML:
 <ng-container matColumnDef="from">
    <mat-header-cell *matHeaderCellDef> From </mat-header-cell>
    <mat-cell *matCellDef="let computationrates">{{computationrates[0].ratebands[0].from}}</mat-cell>
  </ng-container>
Cám ơn các bạn.
 

PVS

Moderator
Thành viên BQT
#2
Bạn cần viết lại template như sau:

Trong file .ts của bạn:
JSON:
import {Component, OnInit} from '@angular/core';
import { MatTableDataSource} from '@angular/material';

const ELEMENT_DATA = [
{
    "yearlyincentive": {
        "incentive": {
            "number": "0",
            "description": "null"
        },
        "year": "2016"
    },
    "computationrates": {
            "0": {
                "computation": "0",
                "ratetype": "0",
                "ratebands": [
                    {
                        "from": "14",
                        "to": "2015",
                        "percent": "30",
                        "subtract": "1"
                    }
                ]
            }
    }
}
]

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit{
  displayedColumns: string[] = ['from', 'to', 'percent', 'subtract'];
  dataSource = ELEMENT_DATA

 ngOnInit() {
   // this.dataSource = ELEMENT_DATA
  console.log(this.dataSource);

 }

}
Trong template:
Mã:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
  <ng-container matColumnDef="from">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].from}}
    </td>
  </ng-container>

  <ng-container matColumnDef="to">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].to}}
    </td>
  </ng-container>

  <ng-container matColumnDef="percent">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].percent}}
    </td>
  </ng-container>

  <ng-container matColumnDef="subtract">
    <th mat-header-cell *matHeaderCellDef> From. </th>
    <td mat-cell *matCellDef="let element">
      {{element.computationrates[0].ratebands[0].subtract}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
StackBlitz: https://stackblitz.com/edit/angular-z6phzd
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top