我只想在单列中显示角度材料表中的单个对象数据

Question

我想在单列中使用角度材料表显示单个对象数据。

例如我有一个类似的对象

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
];


displayedColumns = ['name','position','weight','symbol'];

对象中的单个元素

我不想要列名，也不想要数据列

我想要的只是将数据逐行呈现在另一行之下。

如果我有一个数组的第零个索引的对象，我想在角度材料数据表中逐行显示它的所有属性，这怎么可能？

或者可以建议任何其他组件用于角材料以相同的方式显示对象属性..!!

这是我的表格 Html 代码

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
   
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
   
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

数据的外观必须像

• 第一行必须显示位置：1
• 第二行必须显示名称：Hydrogen
• 第三行必须显示体重：1.0079
• 第四行必须显示符号：'H'

刚刚在项目符号中提到过，但我希望将所有数据都放在一个列中

这是我执行上述代码的链接

https://stackblitz.com/edit/angular-vbpdqk?embed=1&file=src/app/table-basic-example.html

Answer 1

您可以使用 ng-repeat-start 和 ng-repeat-end 看起来像：

<table>
  <tr ng-repeat-start="element in items">
    <td>Position</td>
    <td>{{element.postition}}</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>{{element.name}}</td>
  </tr>
  <tr>
    <td>Weight</td>
    <td>{{element.weight}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>Symbol</td>
    <td>{{element.symbol}}</td>
  </tr>
</table>

您的结果将如下所示：

• 位置：1
• 名称：“氢”
• 体重：1.0079
• 符号：'H'
• 位置：2
• 名称：“氧气”
• 体重：15.999
• 符号：'O'

希望对你有帮助。

Answer 2

我只是通过在定义中只需要制作 tr 而不是 td 来解决这个问题

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
   <tr mat-cell *matCellDef="let element"> Position : {{element.position}} </tr>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <tr mat-cell *matCellDef="let element"> Name:{{element.name}} </tr>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
   <tr mat-cell *matCellDef="let element">Symbol: {{element.symbol}} </tr>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <tr mat-cell *matCellDef="let element">Weight : {{element.weight}} </tr>
  </ng-container>

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

对于 Additional 我们可以为每个单元格边框底部添加边框，甚至为奇数行添加我们想要的偶数行阴影..!!

Answer 3

在您的 ts 文件中，您需要定义

displayedColumns = ['name','position','weight','symbol'];

建议 - 不要使用表格，而是使用下面的内容来打印值

<div *ngFor='let row of ELEMENT_DATA'>
  <ul>
    <li *ngFor='let obj of row | keyvalue'>{{obj.key}}:{{key.value}} </li>
   </ul>
</div>