角材料垫表，不适用于带有 .push 的 html

Question

我正在使用角度 8 进行无限滚动。我正在使用角度材料表来显示我的数据。

HTML：

<mat-table [dataSource]="displayOfMassSendObjects" 
   infinite-scroll
   [infiniteScrollDistance]="scrollDistance"
   [infiniteScrollUpDistance]="scrollUpDistance"
   (scroll)="onScrollDown()"
   (scrollup) = "onScrollUp()"
>

 <ng-container id = "companyNameColumn" matColumnDef="companyName">
    <mat-header-cell id = "companyNameTitle" 
           *matHeaderCellDef>CompanyName</mat-header-cell>
    <mat-cell class = "companyNameData" *matCellDef="let row"> 
           {{row.companyName}}</mat-cell>
 </ng-container>

 <ng-container id = "emailColumn" matColumnDef="email">
    <mat-header-cell id = "emailTitle" 
          *matHeaderCellDef>Email</mat-header-cell>
    <mat-cell class = "emailData" class="email" *matCellDef="let row"> 
           {{row.email}}</a></mat-cell>
  </ng-container>

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

</mat-table>

加载时，表中显示了 10 条记录。当我向下滚动时，我预计 HTML 中会填充更多记录，但事实并非如此。然而，这些记录被添加到 console.log() 中的数组中。我认为问题在于 HTML Angular Materials 无法识别 .push，因为当我将 .push 替换为 .slice 时，记录会显示在 HTML 中，但不希望应用程序像那样工作。

这是我想要滚动条的表格的组件：

 export class MassSendComponent implements OnInit {
  sum = 10; 
  globalList = []; 
  displayOfMassSendObjects: MassSend[]; 
  tableColumns : string[] = ['ispNumber','companyName', 'email', 'taxId']
  constructor(
      private mockMassSendService: MockMassSendService,
       ) {}

  ngOnInit(): void {
      this.getMassSendData();  
  }

 getMassSendData() {
      this.mockMassSendService.getMassSendData()
         .subscribe(massSendObjects => {
             this.globalList = massSendObjects; 
             this.displayOfMassSendObjects = massSendObjects.slice(0, 
             this.sum);
     }); 
  }

  getMoreData() {
    this.displayOfMassSendObjects.push(this.globalList[this.sum]); 
  }


 onScrollDown(): void {
   console.log(this.displayOfMassSendObjects);  
   this.getMoreData(); 
   this.sum += 1;
  }
}

我还有一个服务方法被调用：

     export class MockMassSendService {

      constructor() { }

         getMassSendData(): Observable<MassSend[]> {
             return of(mockMassSend); 
         }
      }

Answer 1

您可以在每次获取新数据时使用displayOfMassSendObjects = new MatTableDataSource(this.displayOfMassSendObjects);，这将初始化一个新的数据源对象。 您看不到新添加的行的原因是 Mat 表仅在更改对数据源的引用时才反映更改，这就是为什么使用 slice 方法时它可以正常工作的原因。