Question

我想将数据（一行）从其父级传递到组件中。这意味着数据源只是一个对象，而不是预期的类似数组的对象。该表具有三行（包括标题）和三列（属性，描述和值）。

数据接口：

export interface MyData {
  id: number,
  attr1Desc: string,
  attr1Value: number,
  attr2Desc: string,
  attr2Value: string
}

MyComponent.ts

export class MyComponent {
  @Input() row: MyData;

  displayColumns: string[] = ['Attribute_No', 'Desc', 'Value'];
  data: string[] = ['Character', 'World'];
  dataSource: MatTableDataSource(row); // Doesn't work

  getValue(index, type){
    return this.dataSource['attr'+(index+1)+type];
  }
}

MyComponent.html

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="Attribute_No">
    <th mat-header-cell *matHeaderCellDef>Attribute No</th>
    <td mat-cell *matCellDef="let attr;let i = dataIndex;">
      <div *ngIf="i == 0">Character</div>
      <div *ngIf="i == 1">World</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="Desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{getValue(i, 'Desc')}}</td>
  </ng-container>
  <ng-container matColumnDef="Value">
    <th mat-header-cell *matHeaderCellDef>Attribute Value</th>
    <td mat-cell *matCellDef="let attr_value">{{getValue(i, 'Value')}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

Answer 1

首先，您需要等待输入传递到组件中，然后才能在数据源中进行设置，因此应使用setter和getter。

然后数据源必须是一个数组，因此设置[row]。

_row: MyData;
get row(): MyData { return this._row; }
@Input('row')
set row(value: MyData) { 
  this._row = value;
  this.dataSource = new MatTableDataSource([this.row]);
}

Answer 2

将对象映射到数组，然后再将其传递到数据源。

如果数据始终具有相同的格式，则可以手动将其映射：

[
    {attrDesc: myData.attr1Desc, attrValue: myData.attr1Value},
    {attrDesc: myData.attr2Desc, attrValue: myData.attr2Value}
]

否则，使用Object.keys（myData）遍历所有键，并将每对键值作为数组的元素推入。

单行（对象）作为Angular中的数据源

2 个答案: