角墊表未顯示該行中的所有數據

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

在此處查看堆疊閃電戰。