时间戳

首页 > 解决方案 > Primeng 数据表响应问题

angular - Primeng 数据表响应问题

问题描述

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

正常大小的 网页：正常大小的网页

当我减小其大小时的网页：

尺寸减小的网页

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

    }




}

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

先感谢您。

标签： angularresponsiveprimeng

解决方案

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 。

推荐阅读