角垫表未显示该行中的所有数据

Question

我试图将数据从静态文件绑定到Angular Material的mat-table组件。

问题。

并非所有数据都显示在相应的行中，只是其中的一部分。

结果

组件TS

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material'
import { HttpClient } from '@angular/common/http'
import { ExperienciasService } from './services/experiencias.service';
import { variables } from '../../../../config/config';
//import { dataInfoPaztaza } from './info-data/paztaza.data';
import { dataInfoTigre } from './info-data/tigre.data';

@Component({
  selector: 'app-experiencias',
  templateUrl: './experiencias.component.html',
  styleUrls: ['./experiencias.component.scss']
})
export class ExperienciasComponent implements OnInit{

  columnsInfo = ['tecnica', 'fuente', 'url'];
  infoTigre
  infoPaztaza
  currentAPI = variables.NAME_CUENCA

  constructor(public _experienciasService: ExperienciasService,
              private http: HttpClient) { }

  ngOnInit() {
    this.loadInfo()
  }


  loadInfo() {
    if (this.currentAPI == "TIGRE") {
      let data = dataInfoTigre
      this.infoTigre = new MatTableDataSource<any>(data)
    } else if (this.currentAPI == "PAZTAZA") {
      this.http.get("/assets/table-data/paztaza.data.json").subscribe( (res:any) => {
        console.log(res)
        this.infoPaztaza = new MatTableDataSource<any>(res)
      })
    }
  }

}

组件HTML

<mat-table [dataSource]="infoTigre" [class.mat-elevation-z2]="true" *ngIf="infoTigre">
  <ng-container matColumnDef="tecnica" >
    <mat-header-cell  *matHeaderCellDef mat-sort-header>TECNICA DE REMEDIACIÓN</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.tecnica}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="fuente">
    <mat-header-cell  *matHeaderCellDef mat-sort-header>FUENTE</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.fuente}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="url">
    <mat-header-cell  *matHeaderCellDef mat-sort-header>URL</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.url}}</mat-cell>
  </ng-container>
  <mat-header-row  *matHeaderRowDef="columnsInfo"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columnsInfo;"></mat-row>
</mat-table>

数据源

export const dataInfoTigre = 
[
    {
        tecnica: "Bioceldas o Biopilas (ex situ/on site u off site)",
        fuente: "Eweis, J., Ergas, D., & Schroeder, C. y. (1998). Bioremediation principles. McGraw-Hill International.",
        url: "http://www.sciepub.com/reference/146581"
    },
    {
        tecnica: "Desorción Térmica",
        fuente: "Hurtado Melo, S. (2010). Diseño básico de una planta de desorción térmica para tratamiento de suelos contaminados. Obtenido de http://bibing.us.es/proyectos/abreproy/20229/fichero/2.+Memoria+del+Proyecto%252F5.+M%C3%A9todos+de+descontaminaci%C3%B3n+por+desorci%C3%B3n+t%C3%A9rmica.pdf",
        url: "http://oa.upm.es/3703/"
    },
    {
        tecnica: "tigre",
        fuente: "2",
        url: "2"
    },
    {
        tecnica: "name",
        fuente: "text",
        url: "Nombre del Rey"
    },
    {
        tecnica: "name",
        fuente: "text",
        url: "Nombre del Rey"
    },
]

表单验证器的一些单词：

该应用程序使用基于Material Design的Angular 6版本，客户非常喜欢。 同样，我们使用动态渲染取决于后端api。

Answer 1

如果您只想显示完整的文本而不被截断，则可以执行以下操作：

用span标签将长文本括起来：

<mat-cell *matCellDef="let repoItem">
  <span class="long-text">{{repoItem?.fuente}}</span>
</mat-cell>

并添加以下CSS：

.long-text {
  overflow: auto;
}

在此处查看堆叠闪电战。