Question

我正在使用角度5和材质表来加载数据。

在实验组件中，有两个表，并且这两个表都具有唯一的数据源和displayColumns变量。

但是，在ngAfterViewInit之后，两个表将在3秒内加载数据，但结果是该表与两个表数据混合在一起，如

所示

如果我加载数据来自全局变量的第一个表，则该表正确显示

如果我加载的第二个表中的数据来自局部变量，则该表将不显示任何内容

export class UserListComponent implements OnInit, OnDestroy,AfterViewInit {
   // MatPaginator Inputs
   length = 100;
   pageSize = 10;
   pageSizeOptions: number[] = [5, 10, 25, 100];

   // MatPaginator Output
   pageEvent: PageEvent;
   loading = true;


   dataSource = new MatTableDataSource();
   displayedColumns = ['uid', 'name', 'location', 'wechat','balance','mobile','created','action'];

   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;

   dataSource2 = new MatTableDataSource();
   displayedColumns2 = ['amount', 'price', 'side', 'status','action'];

   table1_data = [
    {
      "uid": "3715",
      "name": "allen",
      "location": "Room-401-building-39",
      "wechat": "badboy",
      "balance": "112.5",
      "integration":"312",
      "mobile":"15798068772",
      "loginTimes":"200",
      "created":"2017-5-14 09:55:03",
      "updated":"2018-5-15 19:55:03"
    },
    {
      "uid": "3715",
      "name": "krisallen",
      "location": "Room-500-building-39",
      "wechat": "badboysssss",
      "balance": "11.5",
      "integration":"32",
      "mobile":"15798068800",
      "loginTimes":"20",
      "created":"2017-5-14 10:40:03",
      "updated":"2018-4-15 22:55:03"
    }
  ];

  ngAfterViewInit() {


    var self = this;
    setTimeout(function(){

      self.dataSource = new MatTableDataSource(self.table1_data);
      //self.ref.markForCheck();


      let table2_data = [
                    {amount:'1000', price: '1000', side:'buy',status:'filled'},
                    {amount:'1000', price: '1000', side:'buy',status:'filled'}];
      console.log('fetchMyOpenOrder');
      self.dataSource2 = new MatTableDataSource(table2_data);
      //self.ref.markForCheck();

    },3000);
  }

}

    <div class="card">
      <div class="card-body table-responsive">

            <div class="example-header">
              <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
              </mat-form-field>
            </div>
            <mat-table [dataSource]="dataSource" matSort class="table table-hover">

              <ng-container matColumnDef="uid">
                <mat-header-cell *matHeaderCellDef> uid. </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.uid}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="location">
                <mat-header-cell *matHeaderCellDef> location </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.location}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="wechat">
                <mat-header-cell *matHeaderCellDef> wechat </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.wechat}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="balance">
                <mat-header-cell *matHeaderCellDef> balance </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.balance}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="mobile">
                <mat-header-cell *matHeaderCellDef> mobile </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.mobile}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="created">
                <mat-header-cell *matHeaderCellDef> created </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.created}} </mat-cell>
              </ng-container>

              <ng-container matColumnDef="action">
                <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
                <mat-cell *matCellDef="let element">

                    <button mat-mini-fab color="primary"><a href="#/pages/user/{{element.uid}}"> 进入 </a></button>
                    <button mat-raised-button type="button" matTooltip="Edit" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
                        <i class="fa fa-edit" (click)=" openEditDialog(element)" ></i>
                    </button>
                    <button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
                        <i class="fa fa-trash" (click)=" openRemoveDialog(element)" ></i>
                    </button>

                </mat-cell>
              </ng-container>

              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;" (click) = "rowClicked(row)" ></mat-row>
            </mat-table>
            <mat-paginator #paginator [pageIndex]=0 [pageSize]=5  [pageSizeOptions]="[5, 10, 25]" (page)="getNext($event)">
            </mat-paginator>

    </div>
</div>




<div class="row">

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

            <ng-container matColumnDef="amount">
              <th mat-header-cell *matHeaderCellDef> amount. </th>
              <td mat-cell *matCellDef="let order"> {{order.amount}} </td>
            </ng-container>

            <ng-container matColumnDef="price">
              <th mat-header-cell *matHeaderCellDef> price </th>
              <td mat-cell *matCellDef="let order"> {{order.price}} </td>
            </ng-container>

            <ng-container matColumnDef="side">
              <th mat-header-cell *matHeaderCellDef> expires </th>
              <td mat-cell *matCellDef="let order"> {{order.side}} </td>
            </ng-container>

            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef> status </th>
              <td mat-cell *matCellDef="let order"> {{order.status}} </td>
            </ng-container>

            <ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef> action </th>
              <td mat-cell *matCellDef="let order">>
                    {{order.status}}
              </td>
            </ng-container>

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

角5材质表无法正确显示2个表，无法弄清原因

0 个答案: