Primeng 数据表响应问题答案

【问题标题】：Primeng datatable responsiveness issuePrimeng 数据表响应问题
【发布时间】：2019-10-13 01:22:01
【问题描述】：

我目前正在学习如何在我们的项目中使用primeng数据表，我对此表的响应能力有疑问。如果网页处于正常大小，或者当我们减小其大小同时在单词之间有空格、连字符等分隔符时，该表格是响应式的。但是，我们观察到，如果我们在其中一列中有长文本，当我们减小网页大小时，它将不再响应。

正常大小的网页： web page with normal size

缩小尺寸时的网页：

web page with decrease in size

我的html代码是：

<p-dataTable [value]="memberList" [responsive]="true" [stacked]="stacked" >

    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" >

    </p-column>

</p-dataTable>

我的打字稿代码是：

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {AccordionModule} from "primeng/primeng";
import {MenuItem} from 'primeng/api' ;
import {DataTableModule} from "primeng/datatable";


export interface Member
{
    userName;
    email;
    jobTitle;
    status;
    phoneNumber;
    joinDate;
}



@Component({
    selector: 'app-member-liste',
    templateUrl: './member-liste.component.html',
    styleUrls: ['./member-liste.component.css']
})
export class MemberListeComponent implements OnInit {

    memberList: string[] ;
    members: Member[] ;
    cols: any[] ;

    displayedColumns = ['userName', 'email' , 'status', 'phoneNumber', 'joinDate'];

    constructor( private httpService: HttpClient) {

    }



    ngOnInit() {

        this.httpService.get('./assets/membresTable.json').subscribe(
            data => {
                this.memberList = data as string [];
            },
            (err: HttpErrorResponse ) => {
                console.log(err.message);
            }
        );

        this.cols = [
            {field: 'userName', header: 'UserName'},
            {field: 'email', header: 'Email'},
            {field: 'jobTitle', header: 'JobTitle'},
            {field: 'status', header: 'Status'},
            {field: 'phoneNumber', header: 'PhoneNumber'},
            {field: 'joinDate', header: 'JoinDate'}
        ] ;

    }




}

如果您能帮我解决这个问题，我将不胜感激。

提前谢谢你。

【问题讨论】：

标签： angular responsive primeng

【解决方案1】：

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {AccordionModule} from "primeng/primeng";
import {MenuItem} from 'primeng/api' ;
import {DataTableModule} from "primeng/datatable";


export interface Member
{
    userName;
    email;
    jobTitle;
    status;
    phoneNumber;
    joinDate;
}



@Component({
    selector: 'app-member-liste',
    templateUrl: './member-liste.component.html',
    styleUrls: ['./member-liste.component.css']
})
export class MemberListeComponent implements OnInit {

    memberList: string[] ;
    members: Member[] ;
    cols: any[] ;

    displayedColumns = ['userName', 'email' , 'status', 'phoneNumber', 'joinDate'];

    constructor( private httpService: HttpClient) {

    }



    ngOnInit() {

        this.httpService.get('./assets/membresTable.json').subscribe(
            data => {
                this.memberList = data as string [];
            },
            (err: HttpErrorResponse ) => {
                console.log(err.message);
            }
        );

        this.cols = [
            {field: 'userName', header: 'UserName'},
            {field: 'email', header: 'Email'},
            {field: 'jobTitle', header: 'JobTitle'},
            {field: 'status', header: 'Status'},
            {field: 'phoneNumber', header: 'PhoneNumber'},
            {field: 'joinDate', header: 'JoinDate'}
        ] ;

    }




}

我已经通过在组件的 file.css 中添加“word-break : break-all”解决了这个问题。

我已阅读以下文档：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break。

【讨论】：