Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Object doesn't support property or method 'fill' error thrown in IE11 when attempting to fill angular material table with data

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

MatTable fails to load data in IE11 Error message SCRIPT438: Object doesn't support property or method 'fill'

Expected behavior

MatTable should load data in IE11

Minimal reproduction of the problem with instructions

Attempt to Angular Material Table with data as shown below <table-component (deleted)="onDeleted($event)" [data]="tableData" [displayedColumns]="columns"></table-component>

tableData is passed from ParentComponent as well as columns.

What is the motivation / use case for changing the behavior?

Creating corporate web app to be able to run in IE11.

Environment

Angular version: 6.0.7

Browser:

Chrome (desktop) version XX
Chrome (Android) version XX
Chrome (iOS) version XX
Firefox version XX
Safari (desktop) version XX
Safari (iOS) version XX
IE version XX
Edge version XX

For Tooling issues:

Node version: 8.11
Platform: Windows

Others:

table.component.ts `import { Component, EventEmitter, OnInit, ViewChild, Input, Output } from ‘@angular/core’; import { MatPaginator, MatSort, MatTableDataSource } from ‘@angular/material’; import { trigger, state, style, transition, animate } from ‘@angular/animations’; import { ClientService } from ‘…/…/Services/clientService.service’;

@Component({ selector: ‘table-component’, styleUrls: [‘table.component.css’], templateUrl: ‘table.component.html’, providers:[ClientService] }) export class TableComponent implements OnInit { @Input() data: any[]; @Input() displayedColumns: string[]; @Output() deleted = new EventEmitter<boolean>(); dataSource: MatTableDataSource<any[]>;

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

constructor(private _clientService: ClientService) {}

ngOnInit() {
	this.dataSource = new MatTableDataSource(this.data);
	this.dataSource.paginator = this.paginator;
	this.dataSource.sort = this.sort;
}

applyFilter(filterValue: string) {
	this.dataSource.filter = filterValue.trim().toLowerCase();

	if (this.dataSource.paginator) {
		this.dataSource.paginator.firstPage();
	}
}
delete(exception: any) {
	let cle = {
		contractorID: exception.contractorID,
		officeName: exception.officeName,
		prismClientID: exception.prismClientID
	};
	this._clientService.DeleteClientLocatorException(cle).subscribe((data) => {
		this.deleted.emit(true);
		this.dataSource.disconnect();
		this.dataSource.connect();
	});;
}}`

table.component.html `<mat-form-field> <input matInput (keyup)=“applyFilter($event.target.value)” placeholder=“Filter”> </mat-form-field>

	<ng-container matColumnDef="prismClientName">
		<th mat-header-cell *matHeaderCellDef mat-sort-header> Prism Client Name </th>
		<td mat-cell *matCellDef="let row"> {{row.prismClientName}} </td>
	</ng-container>

	<ng-container matColumnDef="officeName">
		<th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th>
		<td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
	</ng-container>

	<ng-container matColumnDef="contr_Cmpy_NM">
		<th mat-header-cell *matHeaderCellDef mat-sort-header> Company Name </th>
		<td mat-cell *matCellDef="let row"> {{row.contr_Cmpy_NM}} </td>
	</ng-container>

	<ng-container matColumnDef="exceptionType">
		<th mat-header-cell *matHeaderCellDef mat-sort-header> Exception Type </th>
		<td mat-cell *matCellDef="let row"> {{row.exceptionType}} </td>
	</ng-container>

	<ng-container matColumnDef="id">
		<th mat-header-cell *matHeaderCellDef></th>
		<td mat-cell *matCellDef="let row"> <a mat-raised-button (click)="delete(row)">REMOVE</a></td>
	</ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

</div> `

Issue Analytics

State:
Created 5 years ago
Comments:14 (3 by maintainers)

Top GitHub Comments

25reactions

seorefbecommented, Aug 23, 2018

Hello @ajborn , @atdiff

I had the same error but apparently angular planned that.

In src/polyfill.ts you just have to uncomment // import 'core-js/es6/array'; (line 29 for me).

In my case i had to uncomment too import 'core-js/es6/string'; to fix other ie error with “startWith”

Globally based on the staff that you use, you have to uncomment the required polyfill.

11reactions

atdiffcommented, Aug 22, 2018

@matsko I’m getting the same error in IE - “Object doesn’t support property or method ‘fill’”. The line it’s failing on is var HEADER_FILLER = new Array(HEADER_OFFSET).fill(null); which is a part of angular/core.