#json #angular #parsing #angular-material
#json #angular #синтаксический анализ #angular-material
Вопрос:
В настоящее время у меня настроена таблица Angular Material с данными из списка.
Я хотел бы заполнить этот список данными из URL-адреса JSON.
Я предполагаю, что мне придется сначала проанализировать данные в списке, однако я перепробовал множество способов сделать это онлайн и не получил никакой радости. Я урезал свой код, чтобы в нем была текущая рабочая таблица, извлекающая информацию из жестко запрограммированного списка.
Пожалуйста, кто-нибудь может посоветовать, как я это сделаю.
App.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatMenuModule,
MatTableModule,
MatPaginatorModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
title = 'UnitySLATable';
displayedColumns: string[] = ['groups', 'areas', 'applications', 'regions', 'as_of_dates'];
dataSource = new MatTableDataSource<SLAList>(SLAS);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
export interface SLAList {
groups: string;
areas: string;
applications: string;
regions: string;
as_of_dates: string;
}
const SLAS: SLAList[] = [
{groups: 'test', areas: 'test', applications: 'test', regions: 'test', as_of_dates: 'test'},
];
app.component.html:
<body>
<mat-toolbar>
<span>Unity: Daily SLA Dashboard</span>
</mat-toolbar>
<mat-toolbar>
<button mat-flat-button [matMenuTriggerFor]="home">Home</button>
<mat-menu #home="matMenu">
<button mat-menu-item>Overview</button>
</mat-menu>
<button mat-flat-button [matMenuTriggerFor]="selfServ">Self Service</button>
<mat-menu #selfServ="matMenu">
<button mat-menu-item>SLA Management</button>
<button mat-menu-item>SLA Batch Update</button>
<button mat-menu-item>Permission Management</button>
<button mat-menu-item>Report Management</button>
<button mat-menu-item>View Management</button>
<button mat-menu-item>Group Attribute Editor</button>
</mat-menu>
<button mat-flat-button [matMenuTriggerFor]="legDash">Legacy Dashboards</button>
<mat-menu #legDash="matMenu">
<button mat-menu-item>Barclays Wealth</button>
<button mat-menu-item>Commodities</button>
<button mat-menu-item>Credit</button>
<button mat-menu-item>Operations and Cross Product Technology (OCPT)</button>
<button mat-menu-item>Enterprise Solutions</button>
<button mat-menu-item>Equities</button>
<button mat-menu-item>Fixed Income</button>
<button mat-menu-item>Reform</button>
<button mat-menu-item>Retail/Corporate Banking</button>
<button mat-menu-item>FX</button>
<button mat-menu-item>MIHBUS</button>
<button mat-menu-item>MIHBUS Impact Analysis</button>
<button mat-menu-item>Options amp; Structured Rates</button>
<button mat-menu-item>Prime Services</button>
<button mat-menu-item>Risk amp; Analytics</button>
<button mat-menu-item>Sales</button>
<button mat-menu-item>Securitised Products</button>
<button mat-menu-item>TWS</button>
</mat-menu>
<button mat-flat-button [matMenuTriggerFor]="download">Download</button>
<mat-menu #download="matMenu">
<button mat-menu-item>SLA Download</button>
<button mat-menu-item>Historical SLA Delivery</button>
<button mat-menu-item>Usage Report</button>
</mat-menu>
<button mat-flat-button [matMenuTriggerFor]="support">Support</button>
<mat-menu #support="matMenu">
<button mat-menu-item [matMenuTriggerFor]="documentation">Documentation</button>
<button mat-menu-item>Contacts</button>
</mat-menu>
<mat-menu #documentation="matMenu">
<button mat-menu-item>Batch Update Template</button>
<button mat-menu-item>SLA Template</button>
<button mat-menu-item>User Guide</button>
<button mat-menu-item>SLA Mass Upload/Download</button>
<button mat-menu-item>Wiki</button>
</mat-menu>
</mat-toolbar>
<table mat-table [dataSource]="dataSource">
<!-- Groups Column -->
<ng-container matColumnDef="groups">
<th mat-header-cell *matHeaderCellDef> Group </th>
<td mat-cell *matCellDef="let element"> {{element.groups}} </td>
</ng-container>
<!-- Areas Column -->
<ng-container matColumnDef="areas">
<th mat-header-cell *matHeaderCellDef> Area </th>
<td mat-cell *matCellDef="let element"> {{element.areas}} </td>
</ng-container>
<!-- Applications Column -->
<ng-container matColumnDef="applications">
<th mat-header-cell *matHeaderCellDef> Application </th>
<td mat-cell *matCellDef="let element"> {{element.applications}} </td>
</ng-container>
<!-- Regions Column -->
<ng-container matColumnDef="regions">
<th mat-header-cell *matHeaderCellDef> Region </th>
<td mat-cell *matCellDef="let element"> {{element.regions}} </td>
</ng-container>
<!-- AsOfDates Column -->
<ng-container matColumnDef="as_of_dates">
<th mat-header-cell *matHeaderCellDef> As of </th>
<td mat-cell *matCellDef="let element"> {{element.as_of_dates}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</body>
Надеюсь, вы сможете мне помочь.
Ответ №1:
Таким образом, вам просто нужно загрузить свои данные и установить их в источник данных:
dataSource = new MatTableDataSource();
В ngOnInit вызовите свой api (чтобы получить Json) и назначьте свои данные таблице:
this.dataService.getData().subscribe(data => {
this.dataSource.data = data ;
}, err => {
console.log(err);
});
}
Надеюсь, это решит вашу проблему.