Проблема с отзывчивостью данных - PullRequest
Новая
       11

Проблема с отзывчивостью данных

0 голосов
/ 27 мая 2019

В настоящее время я изучаю, как использовать primeng datatable в нашем проекте, у меня есть проблема с отзывчивостью этой таблицы. Таблица реагирует, если веб-страница имеет нормальный размер или когда мы уменьшаем ее размер, имея разделители, такие как пробел, дефис между словами. Но мы замечаем, что если у нас есть длинный текст в одном из столбцов, он больше не будет реагировать, пока мы уменьшаем размер веб-страницы.

Веб-страница с нормальным размером: веб-страница с нормальным размером

Веб-страница, когда я уменьшаю ее размер:

веб-страница с уменьшением в размере

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

    }




}

Буду очень признателен, если вы поможете мне решить эту проблему.

Заранее спасибо.

1 Ответ

0 голосов
/ 02 июня 2019 

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

    }




}

Я решил проблему, добавив «word-break: break-all» в file.css компонента.

Я прочитал следующий документ: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break.

...