加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – PrimeNG TreeTable为空

发布时间:2020-12-17 17:09:59 所属栏目:安全 来源:网络整理
导读:为了在Angular 4.1项目中使用PrimeNG,我遇到了一些问题. 这是我关注的文档:https://www.primefaces.org/primeng/#/treetable 我正在测试TreeTable功能,但UI中的输出是空的.它显示没有内容的单元格,并且class =“undefined”. app.component.html: p-treeTa
为了在Angular 4.1项目中使用PrimeNG,我遇到了一些问题.

这是我关注的文档:https://www.primefaces.org/primeng/#/treetable

我正在测试TreeTable功能,但UI中的输出是空的.它显示没有内容的单元格,并且class =“undefined”.

Empty Table

app.component.html:

<p-treeTable *ngIf="treeNode" [value]="treeNode">
  <p-column field="id" header="ID"></p-column>
  <p-column field="label" header="Label"></p-column>
</p-treeTable>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TreeTableModule,SharedModule } from 'primeng/primeng';

import { AppComponent } from './app.component';
import { CustomerTypeService } from '../app-configure/service/app.customer.type.service';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    CommonModule,BrowserModule,HttpModule,BrowserAnimationsModule,TreeTableModule,SharedModule
  ],providers: [CustomerTypeService],bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component,OnInit } from '@angular/core';
import { TreeNode } from 'primeng/primeng';

import { CustomerTypeService } from '../app-configure/service/app.customer.type.service';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers: []
})
export class AppComponent implements OnInit {
  treeNode: TreeNode[];

  constructor(private customerTypesService: CustomerTypeService) {}

  ngOnInit(): void {
    this.customerTypesService.getCustomerTypes()
        .then(treeNode => {
          this.treeNode = treeNode;
          console.log(this.treeNode);
        });
  }
}

这是我从HTTP请求中获取的JSON字符串:[{“id”:1,“label”:“Account”,“parentId”:null,“parentLabel”:null},{“id”: 2,“label”:“Bank Account”,“parentId”:1,“parentLabel”:“Account”},{“id”:3,“label”:“Test”,“parentLabel” :空值}]

app.customertype.service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import {DefaultConfiguration} from '../../app/app.defaults';
import {CustomerType} from '../model/customer.type';
import {TreeNode} from 'primeng/primeng';

@Injectable()
export class CustomerTypeService {
    constructor(private http: Http) {}

    /**
     * Returns an array of all Customer Types.
     * @returns {Promise<CustomerType[]>}
     */
    getCustomerTypes(): Promise<TreeNode[]> {
        return this.http
            .get(`${DefaultConfiguration.BASE_API_URL}/CustomerTypes/`,DefaultConfiguration.getHeaders())
            .toPromise()
            .then(response => <TreeNode[]> response.json())
            .catch(DefaultConfiguration.handleError);
    }
}

解决方法

添加* ngIf =“treeNode”

<p-treeTable [value]="treeNode" *ngIf="treeNode">...</p-treeTable>

对象TreeNode实现此接口

export interface TreeNode {
 label?: string;
 data?: any;
 icon?: any;
 expandedIcon?: any;
 collapsedIcon?: any;
 children?: TreeNode[];
 leaf?: boolean;
 expanded?: boolean;
 type?: string;
 parent?: TreeNode;
 partialSelected?: boolean;
 styleClass?: string;
 draggable?: boolean;
 droppable?: boolean;
 selectable?: boolean;
}

你的Web服务返回一个没有实现接口TreeNode的元素数组,它没有属性id.

这个数组

[{"id":1,"label":"Account","parentId":null,"parentLabel":null},{"id":2,"label":"Bank Account","parentId":1,"parentLabel":"Account"},{"id":3,"label":"Test","parentLabel":null}]

不是TreeNode []

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读