我正在使用智能管理模板以表格格式显示数据。
我尝试将数据与其工作的硬编码数据绑定，但是当我从ngOnInit上的component.ts命中service.ts并设置为this.data时。虽然它设置但不显示到ui / component.html。
请参阅下面的代码。如果需要更多帮助，请告诉我。
1。在component.html里面我写了： -
<sa-datatable ng-data="data" [options]="{
colReorder: true,
data: data,
columns: [ {data: 'apiKey'}, {data: 'name'}]}"
paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">APIKey</th>
<th data-class="expand">
<i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>
Name
</th>
</tr>
</thead>
</sa-datatable>
2。在component.ts内部
import { Component, OnInit } from '@angular/core';
import {JsonApiService} from "../shared/api/json-api.service";
import {Observable} from 'rxjs/Rx';
import {Router, CanActivate } from '@angular/router';
@Component({
selector: 'administration-apps',
templateUrl: './administration.apps.component.html',
styleUrls: ['./administration.component.css'],
providers: [JsonApiService]
})
export class AdministrationAppsComponent implements OnInit {
//data = [{ "_id": "5807f24c762c48a0b548318f", "accountID": "580170af762c48a0b548318e", "name": "EZ FORMSTest 4", "active": true, "apiKey": "b2878c30-bea0-11e4-983f-d9ec76fdf276" }, { "_id": "580170af762c48a0b008318e", "accountID": "580170af762c48a0b54831ff", "name": "EZ FORMSTest 5", "__v": 0, "active": true, "apiKey": "b2878c30-bea0-11e4-983f-d9ec76fdf276" }];
private data: any;
private errorMessage: string;
constructor(private jsonApiService: JsonApiService, private router: Router) {
}
createNewApp() {
this.router.navigate(['/administration/apps/new'])
}
ngOnInit() {
this.data = this.jsonApiService.getApps()
.subscribe((apps: any) => { this.data = apps; console.log('looking for data now'); console.log(this.data);},
error => this.errorMessage = error);
}
}
第3。在json-api.service.ts里面
getApps(): any {
return this.httpGet('/app');
}
httpGet(path) {
let headers = new Headers({ 'X-TOKEN': '2f348e80-a26c-11e6-aea2- b1b9938df75f' });
let options = new RequestOptions({ headers: headers });
return this.http.get(this.baseURL + path, options)
.map((res: Response) => res.json())
.map(forms => {
return forms;
})
.catch(this.handleError);
}
答案 0 :(得分：0)
我试图通过获取API的响应来绑定数据表。
组件的加载时间早于获取api响应数据。
用于运行时加载的组件。
要动态加载组件，这几步是： -
<强> 1。创建动态组件dynamic.component.ts
import {Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector,
ComponentFactoryResolver} from '@angular/core';
import {AdministrationAppsDatatableComponent} from
'./administration.apps.datatable.component';
@Component({
selector: 'dynamic-component',
entryComponents: [AdministrationAppsDatatableComponent], // Reference to the
components must be here in order to dynamically create them
template: `<div #dynamicComponentContainer></div>`,
})
export class DynamicComponent {
currentComponent = null;
@ViewChild('dynamicComponentContainer', { read: ViewContainerRef })
dynamicComponentContainer: ViewContainerRef;
// component: Class for the component you want to create
// inputs: An object with key/value pairs mapped to input name/input value
@Input() set componentData(data: { component: any, inputs: any }) {
if (!data) {
return;
}
// Inputs need to be in the following format to be resolved properly
let inputProviders = Object.keys(data.inputs).map((inputName) => { return { provide: inputName, useValue: data.inputs[inputName] }; });
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
// We create an injector out of the data we want to pass down and this components injector
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector);
// We create a factory out of the component we want to create
let factory = this.resolver.resolveComponentFactory(data.component);
// We create the component using the factory and the injector
let component = factory.create(injector);
// We insert the component into the dom container
this.dynamicComponentContainer.insert(component.hostView);
// We can destroy the old component is we like by calling destroy
if (this.currentComponent) {
this.currentComponent.destroy();
}
this.currentComponent = component;
}
constructor(private resolver: ComponentFactoryResolver) {
}
}
<强> 2。创建了administration.apps.datatable.component.ts
import {Component, Injector} from '@angular/core';
@Component({
selector: "adminAppsHtml",
template: `<sa-datatable [options]="tblOptions"
paginationLength="true"
tableClass="table table-striped table-bordered table-hover"
width="100%">
<thead>
<tr>
<th>APIKey</th>
<th>Name</th>
</tr>
</thead>
</sa-datatable>
`
})
export class AdministrationAppsDatatableComponent {
tblOptions = {};
constructor(private injector: Injector) {
this.tblOptions = this.injector.get('options');
console.log('looking for options in admin apps')
console.log(this.tblOptions);
}
}
第3。在component.html中写道： - 您想要显示数据表记录的位置。
<dynamic-component [componentData]="componentData"></dynamic-component>
3在您调用API的组件中包含administration.apps.datatable.component，例如在ngOnInit（）方法和模块中。
import {AdministrationAppsDatatableComponent} from
"./administration.apps.datatable.component";
ngOnInit() {
this.jsonApiService.getApps()
.subscribe((apps) => {
this.componentData = {
component: AdministrationAppsDatatableComponent,
inputs: {
options: {
colReorder: false,
data: apps,
columns: [{ data: 'apiKey' }, { data: 'name' }]
}
}
};
},
error => this.errorMessage = error);
}
要获得运行示例，请按照我关注的链接