与angular6的* ngFor中的多个mat-table有关的问题

时间:2018-12-11 13:11:23

标签: javascript angular typescript angular-material angular6

我有以下HTML

 <mat-accordion>
        <mat-divider></mat-divider>
        <mat-expansion-panel *ngFor="let panel of SummaryData">
          <mat-expansion-panel-header class="custom-mat-expansion-panel-header">
            <mat-panel-title>
              <div class="yelloWarnning"></div>
              <div>
                <p>{{panel.startTime}}</p>
                <p>{{panel.endTime}}</p>
              </div>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div class="panel-body">

            <div class="table-container" *ngFor='let type of panel.types'>
              <ng-template *ngFor="let tbl of type.Tables">
               <table mat-table  [dataSource]="tbl"  class="mat-elevation-z8">
                <ng-container  matColumnDef="BinningName">
                  <th mat-header-cell *matHeaderCellDef> Binn Name </th>
                  <td mat-cell *matCellDef="let element">{{element.BinningName}} </td>
                </ng-container>
                <ng-container  matColumnDef="xAxis">
                    <th mat-header-cell *matHeaderCellDef>xAxis </th>
                    <td mat-cell *matCellDef="let element">{{element.xAxis}} </td>
                  </ng-container>
                  <ng-container  matColumnDef="yAxis">
                      <th mat-header-cell *matHeaderCellDef> yAxis </th>
                      <td mat-cell *matCellDef="let element">{{element.yAxis}} </td>
                    </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>

              </table>
            </ng-template>
            </div>

          </div>
        </mat-expansion-panel>
      </mat-accordion>

我遇到以下错误:

Provided data source did not match an array, Observable, or DataSource

我在component.ts中有一些动态逻辑,该逻辑在types中设置数组 我在打字稿中有以下代码会生成对象:

   self.startDateEndDateList.map(function (item) {

      let binnObjectsByType:any =[];
      binningType.map(function (binType) {
        let binningObjects = self.OriginData.binnings.filter(x => x.startTime == item.startTime && x.endTime == item.endTime && x.type == binType);
        let row:any ={'Type': binType};
        let tables:any=[];
        binningObjects.map(function(binObj){
            let iOriginData:any = {"vin":self.OriginData.vin,"binnings":[]};
            iOriginData.binnings.push(binObj);
            let BinningDataHandlerObject :BinningDataHandler = new BinningDataHandler(iOriginData,"BinningTable");
            tables.push({"BinningName":BinningDataHandlerObject.SelectedBinningName,"xAxis":BinningDataHandlerObject.xAxisFinalValue,"yAxis":BinningDataHandlerObject.yAxisFinalValue });
        });
        binnObjectsByType.push({'Type': binType,'Tables':tables});
      });

      self.SummaryData.push({"startTime":item.startTime,"endTime":item.endTime,"types":binnObjectsByType});
    });

是否可以将mat-table放在for循环中?

谢谢。

0 个答案:

没有答案