Question

假设我有一个这样的对象数组，我想在角度材质表中显示以下数据结构中的数据。

这是我的服务代码inmemorydata.service.ts：

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
    createDb() {
const element_data = [
            {
                a : {
                    first: 'xyz',
                    second: 'uvw',
                    third: 'pqr',
                   },
              b :{
                    slow: '35',
                    medium: '60',
                    fast: '120',
                    },
             c:[
                    {name: 'donald',price:677,unit:12,paid:270, value:324, gain:554},
                    {name: 'xing',price:235,unit:85,paid:5375, value:6175, gain:2375},
                    {name: 'son', price:159,unit:45,paid:715, value:6360, gain:785}

                ]
            }
        ];
        return {element_data};
}}

这是我的html文件app.component.html：

<mat-table  #table [dataSource]="dataSource">

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

              <!-- Fund name Column -->
              <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef> Fund name </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].name}} </mat-cell>
              </ng-container>

              <!-- Sell price Column -->
              <ng-container matColumnDef="price">
                <mat-header-cell *matHeaderCellDef> Sell price </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].price}} </mat-cell>
              </ng-container>

              <!-- Unit Column -->
              <ng-container matColumnDef="unit">
                <mat-header-cell *matHeaderCellDef> Unit </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].unit}} </mat-cell>
              </ng-container>

              <!-- You paid Column -->
              <ng-container matColumnDef="paid">
                <mat-header-cell *matHeaderCellDef> You paid </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].paid}} </mat-cell>
              </ng-container>

              <!-- Current value -->
              <ng-container matColumnDef="value">
                <mat-header-cell *matHeaderCellDef> Current Value </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].value}} </mat-cell>
              </ng-container>

              <!-- Gain -->
              <ng-container matColumnDef="gain">
                <mat-header-cell *matHeaderCellDef> Gain </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.c[0].gain}} </mat-cell>
              </ng-container>

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

和，这是我的打字稿文件app.component.ts：

export class TableComponent implements OnInit {
      displayedColumns = ['name', 'price', 'unit', 'paid', 'value', 'gain'];
      dataSource = new MatTableDataSource();

      constructor( private tableService: TableService ) { }

      ngOnInit() {
        this.tableService.getTable().subscribe(
          data => {  this.dataSource.data = data }

        )
      }
}

那么我该如何迭代这些值，以便可以以表格形式显示模拟数据。或如何订阅发布的数据。

aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa F d df F F F F F f a f g h h j j k k k k l F F F f

Answer 1

如果您将[datasource]更改为datasource.c，而仅在每行中使用{{element.<<key>>}}，那么就可以了。声明let element时，element是数组中的一个对象（例如，第一个元素将是{name: 'donald',price:677,unit:12,paid:270, value:324, gain:554}）。

您只会得到第一行，因为每一行都使用element.c[0]。

如何从具有这样的数据结构的内存api中的角度访问和订阅数据

1 个答案: