Question

我目前正在学习如何在我们的项目中使用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>

我的typeScript代码是：

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'}
        ] ;

    }




}

如果您能帮助我解决此问题，我将非常感谢。

谢谢。

Answer 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。

Primeng数据表响应问题

1 个答案: