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

每次fetcb新数据时都可以使用networks: default: external: name: my-pre-existing-network-FromTheOtherCompose，这将初始化一个新的数据源对象。您看不到新添加的行的原因是 Mat表仅在更改对数据源的引用时反映出更改，这就是使用切片方法时它可以正常工作的原因。

角材料Mat-table，无法在.push的html中使用

1 个答案: